如何使用所选复选框隐藏和显示表列

Question

I have a table and in that table I give check box in <th> like <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="1" />Sr No</th>. Currently it gives me the value of selected columns. Now I want to show and hide this column.

Following are my code

<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">

<section class="content">
<div class="row">
 <div class="table-responsive">
   <table id="delivery_checklist_table" class="table table-bordered  table-sm" style=" overflow: auto;">

 <thead>
  <tr>
    <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="1" />Sr No</th>
    <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="2" />Bilty Id</th>
    <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="3" />LR No</th>
    <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="4" />Consignor Name</th>
    <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="5" />Consignor GSTIN</th>
    <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="6" />Consignee Name</th>
    <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="7" />Consignee GSTIN</th>
 </tr>

  </thead>
  <tbody>

    <?php $counter = 1; ?> 
    <?php foreach($bilties as $bilty):?>

  <tr>
  <td><?php echo $counter;?></td>
  <td><?php echo $bilty->id;?></td>
  <td><?php echo $bilty->lr_no;?></td>
  <td><?php echo $bilty->consignor;?></td>
  <td><?php echo $bilty->consignor_gst_no;?></td>
  <td><?php echo $bilty->consignee;?></td>
  <td><?php echo $bilty->consignee_gst_no;?></td>
 </tr>
     <?php $counter++; ?>
     <?php endforeach; ?>              
</tbody> 
    </table>
   </div>
 </div>

    </section>
      <button id="print" name="print" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print </<button type=""></button>> 
  </form>
  </div>

<script>
  $('#print').click(function (event) {
    event.preventDefault();

  var allVals = [];

  $('input[name=selectedrecord]:checked').each(function() {
    allVals.push($(this).val());
  });
    console.log("check Column"+ allVals);
    alert(allVals);
});
</script>

</body> 
</html>  

Answer 1

You can iterate over the array to set the display property with eq():

allVals.forEach(function(i){
  $('tr').each(function(){
    $(this).find('td, th').eq(i-1).css('display', 'none');
  });
});

Demo:

$('#print').click(function (event) {
  $('td').css('visibility', 'visible');
  event.preventDefault();
  var allVals = [];
  $('input[name=selectedrecord]:checked').each(function() {
    allVals.push($(this).val());
  });
  //console.log("check Column"+ allVals);
  allVals.forEach(function(i){
    $('tr').each(function(){
      $(this).find('td, th').eq(i-1).css('display', 'none');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">

  <section class="content">
    <div class="row">
      <div class="table-responsive">
        <table id="delivery_checklist_table" class="table table-bordered  table-sm" style=" overflow: auto;">
          <thead>
          <tr>
            <th><input type="checkbox" name="selectedrecord" value="1" />Sr No</th>
            <th><input type="checkbox" name="selectedrecord" value="2" />Bilty Id</th>
            <th><input type="checkbox" name="selectedrecord" value="3" />LR No</th>
          </tr>

          </thead>
          <tbody>
            <tr>
              <td>1xy</td>
              <td>1abc</td>
              <td>1mnl</td>
            </tr> 
             <tr>
              <td>2xy</td>
              <td>2abc</td>
              <td>2mnl</td>
            </tr> 
          </tbody> 
        </table>
      </div>
    </div>

  </section>
  <button id="print" name="print" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print</button>
</form>

</div>