Question

我找到了一些代码php，MySQL使用复选框..当勾选一个复选框时，表列已经消失..但我需要的是当我勾选一个复选框它会显示表列...我得到了一些代码但是所有这些都显示当它会消失时..所以，任何人都可以帮助我..

HTML ...

<form id="search" name="search" action="index3.php" method="post" class="search">
        <p>
          <input type="text" name="product" id="product" size="18" placeholder="Search Product"/>
          <input type="submit" name="submit2" id="submit2" value="Search" />
        </p>
        <p>Location :
          <input type="checkbox" class="hidecol" id="col_8" value="kluang" />
          Kluang&nbsp;
          <input type="checkbox" class="hidecol" id="col_9" value="kl" />
          KL&nbsp;
          <input type="checkbox" class="hidecol" id="col_10" value="meru" />
          Meru</p>
        <p>Grading :
          <input type="checkbox" class="hidecol" id="col_11" value="grade1" />
          1&nbsp;
          <input type="checkbox" class="hidecol" id="col_12" value="grade2" />
          2&nbsp;
          <input type="checkbox" class="hidecol" id="col_13" value="grade3" />
          3</p>
        <p>Status : 
          <input type="checkbox" class="hidecol" id="col_" value="grade1" /> 
          Available&nbsp;
          <input type="checkbox" class="hidecol" id="col_2" value="grade2" />
          Reserve&nbsp;
          <input type="checkbox" class="hidecol" id="col_3" value="grade3" />
          Clear Stock</p>
        <p>
  <input type="checkbox" class="showcol" id="col_14" value="palletno" />
          Pallet No </p>
      </form>

隐藏n显示列的js代码

$(document).ready(function(){

    // Checkbox click
    $(".showcol").click(function(){

        var id = this.id;
        var splitid = id.split("_");
        var colno = splitid[1];
        var checked = true;

        if($(this).is(":checked")){
            checked = true;
        }else{
            checked = false;
        }
        setTimeout(function(){
            if(checked){
                $('#emp_table td:nth-child('+colno+')').show();
                $('#emp_table th:nth-child('+colno+')').show();
            } else{
                $('#emp_table td:nth-child('+colno+')').hide();
                $('#emp_table th:nth-child('+colno+')').hide();
            }

        }, 1500);
    });
});

Answer 1

试一试。

我清理了很多Javascript。我没有看到超时的重点，所以我评论了这一点。另外，由于您没有列在帖子中的列，我简化了一些，只做了一个。

我还将标签包裹在标签标签中。这可能看起来很简单，但原因是如果您将for属性设置为与输入的id匹配，那么单击标签会将其传递给输入，这对于可用性。

要重新添加其他内容，只需复制我所做的那个，并更新输入id和标签for属性以匹配您要隐藏/显示的列的索引。< / p>

如您所愿unchecked/hidden并选中/显示`您可以默认隐藏列（就像我一样），也可以默认选中复选框。

$(document).ready(function(){

    // Checkbox click
    $(".hidecol").change(function(){
        var self = $(this);
        var id = self.prop('id');
        var colno = id.split("_")[1];

  //      setTimeout(function(){
            if(self.is(':checked')){
                $('#emp_table td:nth-child('+colno+')').show();
                $('#emp_table th:nth-child('+colno+')').show();
            } else{
                $('#emp_table td:nth-child('+colno+')').hide();
                $('#emp_table th:nth-child('+colno+')').hide();;
            }

 //       }, 1500);
    });
});

<style type="text/css" >
#emp_table
{
  border:1px solid black;
  border-radius: 5px
}

#emp_table td, #emp_table th
{
  padding : 0px 10px;
  border : 1px dashed grey;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search" name="search" action="index3.php" method="post" class="search">
        <p>
          <input type="text" name="product" id="product" size="18" placeholder="Search Product"/>
          <input type="submit" name="submit2" id="submit2" value="Search" />
        </p>
        <p>
          Location :
          <input type="checkbox" class="hidecol" id="col_2" value="test" />
         <label for="col_2" >Test&nbsp;Dynamic</label>
        <p>
      </form>
      
      
      <table id="emp_table">
          <tr>
              <th>Fixed</th>
              <th style="display:none;" >Dynamic</th>
          </tr>
         <tr>
              <td>Fixed Value</td>
              <td style="display:none;" >Dynamic Value</td>
         </tr>      
      </table>

更新如果您没有包含jquery，它将无法正常工作。要包含jquery，请在html页面的<head>中执行此操作

 <html>
    <head>
        <title></title> 
         <!-- other stuff -->

         <!-- copy the line below into the head of you page -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

   </head>
   <body>

   </body>
</html>

我可以用什么方法来处理这个问题

1 个答案: