如何在 html 中创建一个复选框以使用 jQuery 隐藏/显示表格中的多个列

Question

我对使用 html 和 Java 编程非常陌生，但无论如何我都在努力完成一些事情。 我想创建一个表格，其中列将显示/隐藏在与复选框的关系中。现在，这已经在这里解决了，但我需要更进一步：我需要通过一个复选框来显示/隐藏表格的两列、三列或更多列。 这是代码示例，我实际上是从另一篇文章中获取的，但我使用的是相同的结构，因此我将在这里进行复制和粘贴。

 $(function () {
    var $chk = $("#grpChkBox input:checkbox"); 
    var $tbl = $("#someTable");
    var $tblhead = $("#someTable th");
    
    $chk.prop('checked', true); 
    
    $chk.click(function () {
    var colToHide = $tblhead.filter("." + $(this).attr("name"));
    var index = $(colToHide).index();
    $tbl.find('tr :nth-child(' + (index + 1) + ')').toggle();
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Show and Hide Columns in a Table</h2>
    <p>Click on each Checkbox to hide corresponding Column&lt;</p>
    <div id="grpChkBox">
    <p><input type="checkbox" name="empid"> Employee ID</p>
    <p><input type="checkbox" name="fname"> First Name</p>
    <p><input type="checkbox" name="lname"> Last Name</p>
    <p><input type="checkbox" name="email"> Email</p>
    <p><input type="checkbox" name="phone"> Phone</p>
    </div>
        
    <table id="someTable">
    <thead>
    <tr>
    <th class="empid" style="display: table-cell;">EmpId</th>
    <th class="fname" style="display: table-cell;">FirstName</th>
    <th class="lname">Last Name</th>
    <th class="email">Email</th>
    <th class="phone">Phone</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td style="display: table-cell;">E342</td>
    <td style="display: table-cell;">Bill</td>
    <td>Evans</td>
    <td>Bill@devcurry.com</td>
    <td>234-2345-2345</td>
    </tr>
    <tr>
    <td style="display: table-cell;">E343</td>
    <td style="display: table-cell;">Laura</td>
    <td>Matt</td>
    <td>laura@devcurry.com</td>
    <td>123-1234-5678</td>
    </tr>
    <tr>
    <td style="display: table-cell;">E344</td>
    <td style="display: table-cell;">Ram</td>
    <td>Kumar</td>
    <td>ram@devcurry.com</td>
    <td>345-3456-7890</td>
    </tr>
    </tbody>
    </table>

我怎样才能做到这一点，通过选择一个复选框来控制多于一列的可见性？ 在示例中，我想删除复选框“First Name”和“Last Name”，并且只有一个复选框，例如“Name”来控制 First Name 和 Last Name 两列。

示例如下：https://jsfiddle.net/marcoud/4t8aukzz/4/

Answer 1

一种选择是为复选框的name 属性使用逗号分隔值。

单击.split 值并执行循环以隐藏或显示列。

$(function() {
  var $chk = $("#grpChkBox input:checkbox");
  var $tbl = $("#someTable");
  var $tblhead = $("#someTable th");

  $chk.prop('checked', true);

  $chk.click(function() {

    //Split the value of name
    var names = $(this).attr("name").split(",");

    //Loop thru each name
    $.each(names, function(index, value) {
      var colToHide = $tblhead.filter("." + value);
      var index = $(colToHide).index();
      $tbl.find('tr :nth-child(' + (index + 1) + ')').toggle();
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Show and Hide Columns in a Table</h2>
<p>Click on each Checkbox to hide corresponding Column&lt;</p>
<div id="grpChkBox">
  <p><input type="checkbox" name="empid"> Employee ID</p>
  <p><input type="checkbox" name="fname,lname"> Name</p> <!---- Have a comma separated value for name attribute ----->
  <p><input type="checkbox" name="email"> Email</p>
  <p><input type="checkbox" name="phone"> Phone</p>
</div>

<table id="someTable">
  <thead>
    <tr>
      <th class="empid" style="display: table-cell;">EmpId</th>
      <th class="fname" style="display: table-cell;">FirstName</th>
      <th class="lname">Last Name</th>
      <th class="email">Email</th>
      <th class="phone">Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display: table-cell;">E342</td>
      <td style="display: table-cell;">Bill</td>
      <td>Evans</td>
      <td>Bill@devcurry.com</td>
      <td>234-2345-2345</td>
    </tr>
    <tr>
      <td style="display: table-cell;">E343</td>
      <td style="display: table-cell;">Laura</td>
      <td>Matt</td>
      <td>laura@devcurry.com</td>
      <td>123-1234-5678</td>
    </tr>
    <tr>
      <td style="display: table-cell;">E344</td>
      <td style="display: table-cell;">Ram</td>
      <td>Kumar</td>
      <td>ram@devcurry.com</td>
      <td>345-3456-7890</td>
    </tr>
  </tbody>
</table>