Я хочу показать только выбранные столбцы таблицы флажков на моей странице печати

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

Вы можете добавить секунду foreach для th точно так же, как с td:

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

Answer 2

$('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'), если вы не хотите выделять пространство элементов