使用jQuery控制table表格的tr行顯示和隱藏效果

antzone發表於2017-03-28
jQuery

當前table表格已經在網頁佈局中鮮有出現，基本上已經完全被div css所取代。

但是在某些應用方面，table的優勢卻是非常顯著的，比如用來製作表格資料，所以對於表格的一些操作還是要掌握的。

下面就介紹一下如何用jQuery來控制表格tr行的顯示與隱藏。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>table細線表格-螞蟻部落</title>
<style type="text/css"> 
#thetable{
  background-color:green;
  font-size:12px;
}
#thetable th{
  text-align:center;
  background-color:#CCF;
  height:30px;
  line-height:30px;
}
#thetable td{
  width:150px;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#FFF;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $.each($("#thetable tr"),function(index){ 
    if(index>1){ 
      $(this).hide(); 
    } 
  })
});
</script> 
</head> 
<body> 
<table cellpadding="0" cellspacing="1" id="thetable">
  <tr>
    <th>標題一</th>
    <th>標題二</th>
    <th>標題三</th>
    <th>標題四</th>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
</table>
</body> 
</html>

上面的程式碼可以將索引值大於1的tr行隱藏。

$.each()方法可以參閱jQuery.each()一章節。

hide()方法可以參閱jQuery hide()一章節。

實現的方法有很多種，下面再來介紹一種比較常用的方式，程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>table細線表格-螞蟻部落</title>
<style type="text/css"> 
#thetable{
  background-color:green;
  font-size:12px;
}
#thetable th{
  text-align:center;
  background-color:#CCF;
  height:30px;
  line-height:30px;
}
#thetable td{
  width:150px;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#FFF;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("#thetable tr[class=hide]").hide()
});
</script> 
</head> 
<body> 
<table cellpadding="0" cellspacing="1" id="thetable">
  <tr>
    <th>標題一</th>
    <th>標題二</th>
    <th>標題三</th>
    <th>標題四</th>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr class="hide">
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr class="hide">
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
</table>
</body> 
</html>

tr[class=hide]可以參閱jQuery [attribute=value]一章節。

相關文章