如何使用输入复选框 select 项目？

Question

这是我的代码片段，我想显示两个 selected 列的差异，并创建一个新的 table，其中列 selected 和差异作为一列。我不知道如何在复选框的帮助下 select table 列（基本上将复选框与 table 列绑定）。我无法在 Stack Overflow 或任何其他网站上找到任何参考资料。

编辑：我添加了 JS 代码以获取与特定 header 对应的列数据，现在我正在将其硬编码为 header“三”。如何选择绑定到单击的输入复选框的特定列数据？

columnTh = $("table th:contains('Three')"); 
        columnIndex = columnTh.index() + 1; 
        let arr = [];
        alert(columnIndex)
      arr =  $('table tr td:nth-child(' + columnIndex + ')').text()
      
        alert(arr)

table {
  border: 1px solid white;
  text-align: center;
  padding: 6px;
  background: #e1edf9;
}

td {
  border: 1px solid white;
  text-align: center;
  padding: 6px;
}

td:first-child,
tr:first-child {
  background-color: #003a6a !important;
  color: white !important;
}

.table-scroll {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
}

.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap {
  position: relative;
}

.table-scroll tr:first-child {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}

.table-scroll tfoot tr {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #666;
  color: #fff;
  z-index: 4;
}

tr:first-child {
  z-index: 5;
}

@media screen and (max-width: 500px) {
  td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
    max-width: 140px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
  <table id="main-table" class="main-table">
    <tbody>
      <tr>
            <th>One</th>
            <th>Two <input type="checkbox" id="c2" value="on" name="cb2"/></th>
            <th>Three<input type="checkbox" id="c3" value="on" name="cb3"/></th>
            <th>Four<input type="checkbox" id="c4" value="on" name="cb4"/></th>
            <th>Five<input type="checkbox" id="c5" value="on" name="cb5"/></th>
        </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>21</td>
        <td>2</td>
        <td>93</td>
        <td>74</td>
        <td>85</td>
      </tr>
      <tr>
        <td>21</td>
        <td>32</td>
        <td>93</td>
        <td>24</td>
        <td>15</td>
      </tr>
      <tr>
        <td>91</td>
        <td>72</td>
        <td>13</td>
        <td>14</td>
        <td>85</td>
      </tr>
      <tr>
        <td>411</td>
        <td>422</td>
        <td>423</td>
        <td>144</td>
        <td>145</td>
      </tr>
      <tr>
        <td>151</td>
        <td>522</td>
        <td>93</td>
        <td>54</td>
        <td>515</td>
      </tr>
      <tr>
        <td>610</td>
        <td>621</td>
        <td>363</td>
        <td>464</td>
        <td>65</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>13</td>
        <td>41</td>
        <td>5</td>
      </tr>
      <tr>
        <td>11</td>
        <td>120</td>
        <td>143</td>
        <td>214</td>
        <td>5</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
      </tr>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
      </tr>
      <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
        <td>45</td>
      </tr>
      <tr>
        <td>51</td>
        <td>52</td>
        <td>53</td>
        <td>54</td>
        <td>55</td>
      </tr>
      <tr>
        <td>61</td>
        <td>62</td>
        <td>63</td>
        <td>64</td>
        <td>65</td>
      </tr>
     
    </tbody>
  </table>
</div>

Answer 1

我不知道你想如何显示差异，但这可能会让你开始：

const table = document.getElementById("main-table"),
      checkboxes = table.querySelectorAll('th > input[type="checkbox"]');

let columns = {};
for(let i = 0; i < checkboxes.length; i++)
{
  checkboxes[i].addEventListener("input", onInput);
}

function onInput(e)
{
  const input = e.target,
        column = input.parentNode.cellIndex,
        tds = table.querySelectorAll('td:nth-child(' + (column + 1) + ')');

  if (input.checked)
  {
    let list = [];
    for(let i = 0; i < tds.length; i++)
    {
      list[list.length] = tds[i].textContent;
    }
    columns[column] = list;
  }
  else
  {
    delete columns[column];
  }
  if (Object.keys(columns).length > 1)
    showDifference();
  else
    table.classList.remove("result");
}

function showDifference()
{
  table.classList.add("result");
  let cells = table.getElementsByClassName("result"),
      trs = table.querySelectorAll("tr");

  if (!cells.length)
  {
    cells = [];
    for(let i = 0, cell; i < trs.length; i++)
    {
      cell = document.createElement(i ? "td" : "th");
      if (!i)
        cell.textContent = "Results";

      cell.className = "result";
      cells[cells.length] = cell;
      trs[i].appendChild(cell);
    }
  }

  let dif = [];
  for(let r in columns)
  {
    for(let i = 0; i < columns[r].length; i++)
    {
      if (dif[i] === undefined)
        dif[i] = [];

      dif[i][dif[i].length] = columns[r][i];
    }
  }

  for(let i = 0; i < dif.length; i++)
  {
    cells[i+1].textContent = dif[i];
  }
}

table {
  border: 1px solid white;
  text-align: center;
  padding: 6px;
  background: #e1edf9;
}

td {
  border: 1px solid white;
  text-align: center;
  padding: 6px;
}

td:first-child,
tr:first-child {
  background-color: #003a6a !important;
  color: white !important;
}

.table-scroll {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
}

.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap {
  position: relative;
}

.table-scroll tr:first-child {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}

.table-scroll tfoot tr {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #666;
  color: #fff;
  z-index: 4;
}

tr:first-child {
  z-index: 5;
}

@media screen and (max-width: 500px) {
  td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
    max-width: 140px;
  }
}

.main-table:not(.result) th.result,
.main-table:not(.result) td.result
{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
  <table id="main-table" class="main-table">
    <tbody>
      <tr>
            <th>One</th>
            <th>Two <input type="checkbox" id="c2" value="on" name="cb2"/></th>
            <th>Three<input type="checkbox" id="c3" value="on" name="cb3"/></th>
            <th>Four<input type="checkbox" id="c4" value="on" name="cb4"/></th>
            <th>Five<input type="checkbox" id="c5" value="on" name="cb5"/></th>
        </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>21</td>
        <td>2</td>
        <td>93</td>
        <td>74</td>
        <td>85</td>
      </tr>
      <tr>
        <td>21</td>
        <td>32</td>
        <td>93</td>
        <td>24</td>
        <td>15</td>
      </tr>
      <tr>
        <td>91</td>
        <td>72</td>
        <td>13</td>
        <td>14</td>
        <td>85</td>
      </tr>
      <tr>
        <td>411</td>
        <td>422</td>
        <td>423</td>
        <td>144</td>
        <td>145</td>
      </tr>
      <tr>
        <td>151</td>
        <td>522</td>
        <td>93</td>
        <td>54</td>
        <td>515</td>
      </tr>
      <tr>
        <td>610</td>
        <td>621</td>
        <td>363</td>
        <td>464</td>
        <td>65</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>13</td>
        <td>41</td>
        <td>5</td>
      </tr>
      <tr>
        <td>11</td>
        <td>120</td>
        <td>143</td>
        <td>214</td>
        <td>5</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
      </tr>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
      </tr>
      <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
        <td>45</td>
      </tr>
      <tr>
        <td>51</td>
        <td>52</td>
        <td>53</td>
        <td>54</td>
        <td>55</td>
      </tr>
      <tr>
        <td>61</td>
        <td>62</td>
        <td>63</td>
        <td>64</td>
        <td>65</td>
      </tr>
     
    </tbody>
  </table>
</div>

如何使用输入复选框 select 项目？

How to select items using a input checkbox?

html

javascript

jquery

html-table