HTML select 带有固定标题的标签？

Question

我正在寻找一种解决方案来制作一个可滚动的 select 框，其标题如图中所示。如果我使用 table，我无法选择任何行。我希望用户标记一个选项，这样他就可以在点击按钮时将其删除。如果可能的话，我正在寻找一个简单的 html+css 解决方案。

如果我使用 select-tag，我不确定如何添加任何标题。

欢迎大家提出建议！

到目前为止我尝试过的：

div.tableContainer {
  clear: both;
  border: 1px solid #963;
  height: 285px;
  overflow: auto;
  width: 900px
}

div.tableContainer table {
  float: left;
}

thead.fixedHeader tr {
  position: relative;
}

thead.fixedHeader th {
  background: #C96;
  border-left: 1px solid #EB8;
  border-right: 1px solid #B74;
  border-top: 1px solid #EB8;
  font-weight: normal;
  padding: 4px 3px;
  text-align: left
}

html>body tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
  width: 100%
}

html>body thead.fixedHeader {
  display: table;
  overflow: auto;
  width: 100%
}

tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
  background: #EEE;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}

<div id="tableContainer" class="tableContainer">
  <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
    <thead class="fixedHeader">
      <tr>
        <th width="20%">Header 1</th>
        <th width="30%">Header 2</th>
        <th width="50%">Header 3</th>
      </tr>
    </thead>
    <tbody class="scrollContent">
      <tr>
        <td width="20%">Cell Content 1</td>
        <td width="30%">Cell Content 2</td>
        <td width="48%">Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

我建议您学习使用 DataTables，它是维护良好且文档化的库，它有许多优秀的插件和开发者用户社区。

var myDTable;
$(document).ready(function() {
  //An example of JavaScript sourced data, though you can instead have your thead and tbody rows defined in your HTML directly
  var dataSet = [];
  for(let i = 0; i < 100; i++) {
    dataSet.push({id:i, name:"Bob Dylan", email:"bob@columbia.com", phone:"512-973-2991"});
  }
  myDTable = $('#myTable').DataTable( {
      data: dataSet,
      columns: [
        { title: "Name", data:"name" },
        { title: "Email", data:"email"},
        { title: "Phone", data:"phone" }
      ],
      //select:true  Allows multiple row selection
      select:"single",
      pageLength:100,
      fixedHeader: true,
      dom:"frtip"
  });
  
  //Listening for event click
  $(document).on("click", "#myTable tbody tr", function() {
    //How to get the clicked row data
    var rowData = myDTable.row(this).data();
    console.log(rowData);
    
    //Get the selected row data
    var selectedRows = myDTable.rows({selected:true});
    var numSelectedRows = selectedRows.count();
    
    //Show hide delete button accordingly
    if(numSelectedRows == 0) {
      $('#deleteRowBtn').hide();
    } else {
      $('#deleteRowBtn').show();
    }
  });
  $(document).on("click", "#deleteRowBtn", function() {
    var selectedRows = myDTable.rows({selected:true});
    var rowToDelete = selectedRows.data()[0];
    console.log("Delete this row: ");
    console.log(rowToDelete);
  });
});

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: #417fd8 !important;
    color: white !important;
}
table.dataTable.display tbody>tr.selected>.sorting_1, table.dataTable.order-column.stripe tbody>tr.selected>.sorting_1 {
    background-color: #2868c3 !important;
}
table.dataTable tbody>tr {
  cursor:pointer
}
table.dataTable thead th, table.dataTable thead td {
    padding: 2px 18px;
    border: 1px solid #efefef;
    border-collapse: collapse;
}

#deleteRowBtn {
  position: fixed;
  width: 200px;
  margin-left: -100px;
  left: 50%;
  z-index: 1000;
  text-align: center;
  padding: 5px 10px;
  box-sizing: border-box;
  bottom: 10px;
  background-color: darkred;
  color: white;
  cursor: pointer;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css" type="text/css">
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" type="text/css">
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>

<table id="myTable" class="display"></table>
<div id="deleteRowBtn" style="display:none">Delete Selected Row</div>

更多资源：

https://datatables.net/

https://datatables.net/reference/option/select

https://datatables.net/reference/option/fixedHeader

HTML select 带有固定标题的标签？

HTML select tag with fixed headline?

html

css

select

scrollable

heading