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

Question

У меня есть таблица, и в этой таблице я ставлю флажок в <th> как <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="1" />Sr No</th>. В настоящее время он дает мне значение выбранных столбцов. Теперь я хочу показать и скрыть этот столбец.

Ниже приведен мой код

<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

Можно выполнить итерацию по массиву, чтобы установить свойство display с помощью eq():

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

Демо:

$('#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>

Answer 2

Это ваше решение, если вы поставите флажок в заголовке таблицы, тогда как для отображения и скрытия этого столбца необходимо поставить флажок над таблицей выше

function hideshow(){
  var cells=document.getElementById('tab').getElementsByTagName('td'), i=0, c;
  var chb=document.getElementById('chboxes').getElementsByTagName('input');
  while(c=cells[i++]){
    c.style.display=chb[c.cellIndex].checked?'':'none';
  }
}

function setEvent(){
  var chb=document.getElementById('chboxes').getElementsByTagName('input'), i=0, c;
  while(c=chb[i++]){
   if(c.type=='checkbox'){
       c.onclick=function(){
            hideshow()
       }
   }
  }
}
onload=setEvent;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

</head>
<body>
<form>
<div id="chboxes">
<input type='checkbox' name='coffee' value='Address'>Address
<input type='checkbox' name='coffee' value='Name'>Name
<input type='checkbox' name='coffee' value='ID'>ID
<input type='checkbox' name='coffee' value='UserName'>UserName
<input type='checkbox' name='coffee' value='Code'>Code
</div>
<table id="tab" width="300" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>Address</td>
    <td>Name</td>
    <td>ID</td>
    <td>UserName</td>
    <td>Code</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</form>
</body>
</html>

Answer 3

Мое решение ...

const MyTable = document.querySelector('#my-table tbody')

document.querySelectorAll('#my-table thead input[type=checkbox]').forEach(inChk=>
{
  inChk.checked = true
  inChk.addEventListener('change', HeadClick)
})

function HeadClick(e) {
  let Col_ALL = MyTable.querySelectorAll(`td:nth-child(${e.target.value})`)

  if ( e.target.checked  ) Col_ALL.forEach(eTD=>eTD.style.visibility='visible' )
  else                     Col_ALL.forEach(eTD=>eTD.style.visibility='hidden')
}

table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .5em 1em; height: 1em; }

<table id="my-table">
  <thead>
    <tr>
      <td><input type="checkbox" value="1"/></td>
      <td><input type="checkbox" value="2"/></td>
      <td><input type="checkbox" value="3"/></td>
      <td><input type="checkbox" value="4"/></td>
      <td><input type="checkbox" value="5"/></td>
    </tr>
  </thead>
  <tbody>
    <tr><td>0.0</td><td>0.1</td><td>0.2</td><td>0.3</td><td>0.4</td></tr>
    <tr><td>1.0</td><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td></tr>
    <tr><td>2.0</td><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td></tr>
    <tr><td>3.0</td><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td></tr>
  </tbody>
</table>

Answer 4

Попробуйте это.Я обновил ваш код, это может вам помочь.Я показал столбец, когда он отмечен, и скрыл, когда не отмечен.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <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 {
            background-color: #99a;
            min-width: 80px;
            height: 32px;
            border: 1px solid #222;
            white-space: nowrap;
        }

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

<body>
    <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 class="col-1"><input type="checkbox" name="selectedrecord" value="1"
                                        onchange="showHideCols()" checked/>Sr No
                                </th>
                                <th class="col-2"><input type="checkbox" name="selectedrecord" value="2"
                                        onchange="showHideCols()"  checked/>Bilty
                                    Id</th>
                                <th class="col-3"><input type="checkbox" name="selectedrecord" value="3"
                                        onchange="showHideCols()"  checked/>LR No
                                </th>
                                <th class="col-4"><input type="checkbox" name="selectedrecord" value="4"
                                        onchange="showHideCols()"  checked/>Consignor Name</th>
                                <th class="col-5"><input type="checkbox" name="selectedrecord" value="5"
                                        onchange="showHideCols()"  checked/>Consignor GSTIN</th>
                                <th class="col-6"><input type="checkbox" name="selectedrecord" value="6"
                                        onchange="showHideCols()"  checked/>Consignee Name</th>
                                <th class="col-7"><input type="checkbox" name="selectedrecord" value="7"
                                        onchange="showHideCols()"  checked/>Consignee GSTIN</th>
                            </tr>

                        </thead>
                        <tbody>



                            <tr>
                                <td class="col-1">1</td>
                                <td class="col-2">2</td>
                                <td class="col-3">3</td>
                                <td class="col-4">4</td>
                                <td class="col-5">5</td>
                                <td class="col-6">6</td>
                                <td class="col-7">7</td>
                            </tr>
                            <tr>
                                <td class="col-1">1</td>
                                <td class="col-2">2</td>
                                <td class="col-3">3</td>
                                <td class="col-4">4</td>
                                <td class="col-5">5</td>
                                <td class="col-6">6</td>
                                <td class="col-7">7</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 type=""></button>
    </form>
    </div>

    <script>
        $('#print').click(function (event) {
            event.preventDefault();
        });
        window.onload = function () {
            showHideCols();
        }
        function showHideCols() {
            var allVals = [];
            $('input[name=selectedrecord]:not(:checked)').each(function () {
                $(".col-" + $(this).val()).css({
                    // visibility: 'hidden'
                    display:'none'
                });
                allVals.push($(this).val());
            });
            $('input[name=selectedrecord]:checked').each(function () {
                $(".col-" + $(this).val()).css({
                    // visibility: 'visible'
                    display:'table-cell'
                });
                allVals.push($(this).val());
            });
            console.log("check Column" + allVals);
            // alert(allVals);
        }
    </script>

</body>