javascript - 我想在打印页面中仅显示选定的复选框表格列

Question

我的表格标题中有复选框，我想仅显示打印页面中选定列的数据，但目前仅隐藏

下面是我的代码:

   <style>
        th,
        td {
            white-space: nowrap;
        }

        div.dataTables_wrapper {
            direction: rtl;
        }

        div.dataTables_wrapper {
            width: 1000px;
            margin: 0 auto;
            font-family: Vazir;
            font-size: 10px;
        }

        th {
            min-width: 80px;
            height: 32px;
            border: 1px solid #222;
            white-space: nowrap;
        }

        td {

            min-width: 80px;
            height: 32px;
            border: 1px solid #222;
            white-space: nowrap;
            text-align: center;
        }
    </style>

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

       <h6 align="center"><font color="#5CAAFF">Barque Trans And Logistics P.V.T.L.T.D</font></h6>
       <h6 align="center" ><font color="#5CAAFF">Safeguarding Valuables</font></h6>

       <h5 align="center"><strong>TEST STOCK</strong></h5>

       <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 class="col1"><input  type="checkbox" name="selectedrecord" value="1">Sr No  </th>
            <th class="col2"><input  type="checkbox" name="selectedrecord" value="2">Bilty Id</th>
            <th class="col3"><input  type="checkbox" name="selectedrecord" value="3">LR No </th>
            <th class="col4"><input  type="checkbox" name="selectedrecord" value="4">Consignor Name</th>
            <th class="col5"><input  type="checkbox" name="selectedrecord" value="5">Consignor GSTIN</th>
            <th class="col6"><input  type="checkbox" name="selectedrecord" value="6">Consignee Name</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>

        </tr>
                 <?php $counter++; ?>
                 <?php endforeach; ?>              
       </tbody> 
      </table>
    </div>
   </div>

    </section>
     <button id="print" name="print"  onclick="printContent('print_test_delivery_check')" 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>



    <script>
       function printContent(e1) {
        $('#print').css('visibility', 'hidden'); //hiding print button on print page


              $('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').eq(i-1).css('visibility', 'hidden');
                });
              });


        var restorepage     = document.innterHTML;
        var printContent    = document.getElementById(e1).innterHTML;
        document.innterHTML = printContent;
        window.print();
       }

</script>

</body> 
</html>

在上图中，它隐藏了表格数据，但我也想隐藏表格列。我不知道我的代码哪里错了。单击打印按钮后，它会打印页面并隐藏数据，但列仍然存在。

Answer 1

$('input[name=selectedrecord]').on('change', function(){
	$('input[name=selectedrecord]:checked').each(function() {
		v=$(this).val()
		$(this).closest('#delivery_checklist_table')
			 .find('td:nth-of-type('+v+')')
			 .css('visibility', 'hidden');
	});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<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 class="col1"><input  type="checkbox" name="selectedrecord" value="1">Sr No  </th>
            <th class="col2"><input  type="checkbox" name="selectedrecord" value="2">Bilty Id</th>
            <th class="col3"><input  type="checkbox" name="selectedrecord" value="3">LR No </th>
            <th class="col4"><input  type="checkbox" name="selectedrecord" value="4">Consignor Name</th>
            <th class="col5"><input  type="checkbox" name="selectedrecord" value="5">Consignor GSTIN</th>
            <th class="col6"><input  type="checkbox" name="selectedrecord" value="6">Consignee Name</th>

          </tr>
      </thead>

        <tbody>


          <tr>
          <td>counter</td><p>
          <td>id</td><p>
          <td>lr_no</td><p>
          <td>consignor;?></td><p>
          <td>consignor_gst_no;?></td><p>
          <td>consignee;?></td><p>

        </tr>
           
       </tbody> 
      </table>
    </div>
   </div>

    </section>
</div>

当您循环检查复选框时，您可以隐藏已有的列，无需额外的 foreach 循环:

只需检查值并使用 nth-of-type() 隐藏

$('input[name=selectedrecord]').on('change', function(){
    $('input[name=selectedrecord]:checked').each(function() {
        v=$(this).val()
        $(this).closest('#delivery_checklist_table')
               .find('td:nth-of-type('+v+')')
               .css('visibility', 'hidden');
    });
})

注意:.css('visibility', 'hidden') 将为隐藏元素保留空间分配。如果您不想分配元素空间，请使用 .hide() 或 .css('display', 'none')