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

【问题标题】：How to select items using a input checkbox?如何使用输入复选框选择项目？
【发布时间】：2021-08-08 07:47:58
【问题描述】：

这是我的代码 sn-p，我想显示两个选定列的差异并创建一个新表，其中选定的列和差异作为一列。我没有得到如何在复选框的帮助下选择表格列（基本上将复选框与表格列绑定）。我在 Stack Overflow 或任何其他网站上都找不到任何参考资料。

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

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>

【问题讨论】：

  • 似乎复选框指定了要包含的列。一种方法是查找包含复选框的&lt;td&gt; 元素的索引，并在您遍历表的行时使用这些索引来引用适当的列。将项目分成几个部分并让我们知道您遇到的具体问题可能会有所帮助。例如，要将处理函数绑定到复选框的更改事件，请参阅this example。
  • 不，这是行不通的，因为这里我们为每个 td 元素指定了一个复选框。我的情况并非如此。对我来说，它在标题上，然后我想要该标题下方的所有 元素，所以我不知道如何将这些列项与标题复选框绑定。
  • 将 jQuery 和 JavaScript 作为 minimal reproducible example 添加到您的帖子中。或者删除`javascript`和jquery标签。
  • 我建议使用列索引。例如。 “标题 3”单元格的 cellIndex 为 2。索引为 2 的每个单元格都位于“标题 3”列中。
  • 您可能还会发现 Javascript get entire 2nd column 和 this demo 很有帮助。

标签： javascript html jquery html-table


【解决方案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>

【讨论】：

  • 是的，它会帮助我进一步工作，谢谢
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode