jQuery表格隔行變色

antzone發表於2017-03-14
jQuery

有時候我們需要獲取指定單元格中的內容，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
.table{ 
  width:300px; 
  height:100px; 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
.table td,.table th { 
  border:1px solid #ccc; 
  padding:5px; 
} 
.odd{
  background:#CCC;
}
.even{
  background:#609;
}
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("div").html($('.table tr:eq(1) td:nth-child(1)').html());
})
</script> 
</head> 
<body>
<div></div> 
<table class="table"> 
  <tr> 
    <td>javascript教程</td> 
    <td>jQuery教程</td> 
  </tr> 
  <tr> 
    <td>HTML教程</td> 
    <td>div css教程</td> 
  </tr> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
  </tr> 
</table> 
</body> 
</html>

以上可以獲取第二行中，第一個單元格中的內容，具體可以參閱相關閱讀。

相關閱讀:

1.:eq()可以參閱jQuery :eq()一章節。

2.:nth-child()可以參閱jQuery :nth-child一章節。

特別說明:

:eq()選擇器的索引是從0開始的，:nth-child()選擇器的索引是從1開始的。

相關文章