<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
//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() {
$(this).children("td").removeClass("hover");
});
//2.奇偶行不同颜色
$("#table3 tbody tr:odd").css("background-color", "#bbf");
$("#table3 tbody tr:even").css("background-color","#ffc");
$("#table3 tbody tr:odd").addClass("odd");
$("#table3 tbody tr:even").addClass("even");
//3.隐藏一行
$("#table3 tbody tr:eq(3)").hide();
//4.隐藏一列
$("#table5 tr td::nth-child(3)").hide();
$("#table5 tr").each(function(){$("td:eq(3)",this).hide()});
//5.删除一行 // 删除除第一行外的所有行
$("#table6 tr:not(:first)").remove();
//6.删除一列 // 删除除第一列外的所有列
$("#table6 tr td:not(:nth-child(1))").remove();
//7.得到（设置）某个单元格的值//设置table7,第2个tr的第一个td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html("value");
//获取table7,第2个tr的第一个td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html();
//8.插入一行：//在第二个tr后插入一行
$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));
});
</script>
</head>
<body>
<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>
</body>
</html>
本文介绍使用jQuery进行表格操作的方法，包括鼠标悬停时改变行背景色、为奇偶行设置不同颜色、隐藏指定行或列、删除行或列、设置单元格值及插入新行等内容。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
