douzhi3105 2019-07-06 13:07
浏览 346
已采纳

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

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>  
  • 写回答

4条回答 默认 最新

  • douwei1930 2019-07-06 14:27
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 python使用pulp线性优化时报错
  • ¥15 开源或低价数据中台哪个最好
  • ¥15 arduino编程出现字符串疑似覆盖现象
  • ¥15 我的b站在没有碰到屏幕的情况下偶尔会自动跳出进度条,就像在屏幕上点了一下一样,但我并没有点。而且视频进度并没有变。这可能是什么原因造成的?
  • ¥30 STK matlab python仿真
  • ¥15 关于IMageEnView 图标定位问题
  • ¥20 求解答(matlab)
  • ¥30 ffmpeg库使用过程中遇到的问题
  • ¥15 pyqt5 中python如何通过Qtwebchannel主动发消息给web前端
  • ¥15 关于HTML中title获取xml内容的问题