douzhi3105
2019-07-06 13:07
浏览 301

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

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>
    
    点赞 打赏 评论
  • dtvnbe1428 2019-07-06 13:23

    Try this out. I have updated your code this may helps you. I have shown column when it's checked and hide when unchecked.

    <!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>
    

    点赞 打赏 评论
  • dongxuan1314 2019-07-06 13:46

    This is your solution if you put checkbox in table heading then how to showing and hiding that column you need to put checkbox on above table

    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>

    </div>
    
    点赞 打赏 评论
  • doujujian0052 2019-07-06 13:49

    My solution...

    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>

    </div>
    
    点赞 打赏 评论

相关推荐 更多相似问题