一個JQuery操作Table的代碼分享
2024-05-06 14:22:15
供稿：網友
代碼如下:
一、數據準備
<table id="table1">
<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>
<table id="table2">
<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>
<tr><td>測試</td><td>測試</td><td>測試</td><td>測試</td></tr>
</table>
<table id="table3">
<thead>
<tr><td>文章標題</td><td>文章分類</td><td>發布時間</td><td>操作</td></tr>
</thead>
<tbody>
<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>
</tbody>
</table>
<table id="table4">
<thead>
<tr><td>文章標題</td><td>文章分類</td><td>發布時間</td><td>操作</td></tr>
</thead>
<tbody>
<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>
<tr><td>測試3</td><td>測試</td><td>測試</td><td>測試</td></tr>
</tbody>
</table>
二、操作
<script type="text/javascript">
//1.鼠標移動行變色
$("#table1 tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})
$("#table2 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
