Dev Faq
1
votes

Comment masquer et afficher les colonnes du tableau avec la case à cocher sélectionnée

J'ai un tableau et dans ce tableau je donne une case à cocher dans comme Sr Non . Actuellement, cela me donne la valeur des colonnes sélectionnées. Maintenant, je veux afficher et masquer cette colonne.

Voici mon 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>

3 commentaires

L'identifiant doit être unique ... et vous avez sélectionné 7 enregistrements ...

bonjour @farhantechno j'ai répondu voir ci-dessous ... et voter pour

bonjour @farhantechno j'ai répondu voir ci-dessous..et modifiez votre validation!

4 Réponses :

0
votes

Essayez ceci. J'ai mis à jour votre code, cela peut vous aider. J'ai montré la colonne lorsqu'elle est cochée et la masquer lorsqu'elle n'est pas cochée. 

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

3 commentaires

Il ne masque que les données que je veux colonne de trou avec en-tête

J'ai modifié le code, veuillez le vérifier. Je pense que c'est ce que vous envisagez.

il n'y a pas d'utilisation d'identifiant pour la question qui lui a été posée, je l'ai donc supprimée.

2
votes

Ceci est votre solution si vous mettez une case à cocher dans l'en-tête du tableau, puis comment afficher et masquer cette colonne, vous devez mettre la case à cocher sur le tableau ci-dessus 

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

0 commentaires
1
votes

Ma solution ... 

<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>
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .5em 1em; height: 1em; }
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')
}

0 commentaires
1
votes

Vous pouvez parcourir le tableau pour définir la propriété display avec eq():

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

Démo: 

$('#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');
    });
  });
});
allVals.forEach(function(i){
  $('tr').each(function(){
    $(this).find('td, th').eq(i-1).css('display', 'none');
  });
});

4 commentaires

il ne masque que l'enregistrement mais je veux masquer la colonne entière et afficher dans la page d'impression

@farhantechno, ajoutez th dans find () ..... $ (this) .find ('td, th'). eq (i-1 ) .css ('visibilité', 'caché');

Son travail mais sur la page d'impression, il prend de l'espace de la colonne de masquage

@farhantechno, essayez css ('display', 'none'); ...... $ (this) .find ('td, th'). eq (i-1 ) .css ('afficher', 'aucun');

Articles qui pourrait vous intéresser :

Pourquoi est-ce que j'obtiens une erreur laravel lors de la création d'un nouveau projet?
Select2 ne s'affiche pas correctement dans le mode bootstrap
Laravel Echo n'écoute pas
La validation de la demande de formulaire ne fonctionne pas. Il charge juste la page d'accueil dans Postman