如何隐藏表中未选中的行

如何在表格中隐藏未选中的行
我有一个大约有30行的表格,每一行都有一个复选框和一些文本.我正试图得到一个方法来做的是有2个按钮在页面底部-隐藏和显示.当单击隐藏按钮时,我希望隐藏所有具有未选中文本框的表行.当单击显示按钮时,我希望恢复所有行的可见性.我想用JavaScript来做这件事(这就是我遇到的问题)-我已经有能力让它的一小部分在一些时间内工作,但我执行的时间不多了,我实际上想要帮助.如果有人有任何想法,我将不胜感激!

选择 | 换行 | 行号
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
  5. <title>View records in MySQL</title> 
  6.  
  7. </head> 
  8.  
  9. <body> 
  10.  
  11. <?php 
  12. //connect to the database 
  13. $connect = mysql_connect("localhost","root",""); 
  14. mysql_select_db("login",$connect); //select the table
  15. $query = mysql_query( "SELECT * FROM employee ")or die(mysql_error());
  16. $show=$_POST['show'];
  17.  
  18.  
  19.  
  20.  
  21. $timezone = "Asia/Calcutta";
  22. if(function_exists('date_default_timezone_set')) date_default_timezone_set($timezone);
  23.  
  24.  
  25.     echo"<center><h2>";
  26.           echo "Cover id generate at :".date('d-m-Y g:i a');
  27.  
  28.           echo "</h2></center>";
  29.           // generate cover id using random number
  30.     $rand= rand();
  31.     echo"<center><h2>";
  32.           echo "Cover Id :".$rand;
  33.           echo "</h2></center>";
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41. echo'
  42. <form action="'.$_SERVER['PHP_SELF'].'" method="post">
  43. <table width="100%" cellpadding="4" border="1">
  44. <tr>
  45. <td> id  </td>
  46. <td> reg_no  </td>
  47. <td> reg_time  </td>
  48. <td>name   </td>
  49. <td> email_id  </td>
  50. <td> valid_from  </td>
  51. <td> valid_to  </td>
  52. <td> pan_no  </td>
  53. <td>  policy </td>
  54. <td> org_name  </td>
  55. <td> reseller_id  </td>
  56. <td> reseller_name </td>
  57. <td>mark</td>
  58. </tr>';
  59.  
  60. while($row = mysql_fetch_assoc($query))
  61. {
  62.     echo'
  63. <tr>
  64. <td>'.$row['id'].'</td>
  65. <td>'.$row['reg_no'].'</td>
  66. <td>' .$row['reg_time'].'</td>
  67. <td>'.$row['name'].'</td>
  68. <td>'.$row['email_id'].'</td>
  69. <td>'.$row['valid_from'].'</td>
  70. <td>' .$row['valid_to'] .'</td>
  71. <td>'.$row['pan_no'].'</td>
  72. <td>' .$row['policy'].'</td>
  73. <td> '.$row['org_name'].'</td>
  74. <td>'.$row['reseller_id'].'</td>
  75. <td>' .$row['reseller_name'].'</td>
  76. <td><input type="checkbox" name="id[]" value="'.$row['id'].'"></td>
  77.  
  78. </tr>';    
  79. }
  80. mysql_free_result($query);
  81. echo '
  82. </table>
  83. <br>
  84. <div align="center">
  85.  
  86. <input type="submit" name="show"  value="show"  >
  87. <input type="reset" name="cancel"  value="Cancel mark">
  88. </div>
  89. </form>';
  90.  
  91. ?> 
  92.  
  93.  
  94. </body> 
  95. </html> 
  96.  
# 回答1


我没有看到任何Java脚本.查看您的脚本以及您收到的任何错误消息都会很有帮助.从客户端查看HTML源文件也会有所帮助.我们不需要PHP的东西来妨碍我们.
# 回答2


尝试此代码

选择 | 换行 | 行号
  1. $("button").click(function(){
  2.     $("table tr").has(".check-box:not(:checked)").hide();
  3. });
  4. table, tr, td {
  5.     border: 1px solid black;
  6. }
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  8. <table>
  9.     <tr>
  10.         <th>Name</th>
  11.         <th>InUse</th>
  12.     </tr>
  13.     <tr>
  14.         <td>foo 1</td>
  15.         <td>
  16.             <input class="check-box" type="checkbox" checked disabled  />
  17.         </td>
  18.     </tr>
  19.     <tr>
  20.         <td>foo 2</td>                  
  21.         <td>
  22.             <input class="check-box" type="checkbox" disabled  />
  23.         </td>
  24.     </tr>
  25.     <tr>
  26.         <td>foo 3</td>                  
  27.         <td>
  28.             <input class="check-box" type="checkbox" checked disabled  />
  29.         </td>
  30.     </tr>
  31.     <tr>
  32.         <td>foo 4</td>                  
  33.         <td>
  34.             <input class="check-box" type="checkbox" disabled  />
  35.         </td>
  36.     </tr>
  37. </table>
  38. <button>Only checked</button>

标签: Javascript

添加新评论