Jquery 实现表格的隔行换色
编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>project</title>
<!-- 导入jquery文件-->
<script src="jquery\jquery.js"></script>
</head>
<style>
table{
text-align: center;
}
#top td{
/* border-bottom:2px solid black; */
font-size:20px;
font-weight:800px;
}
</style>
<body>
<table width="600px" cellpadding="10px" cellspacing="0">
<tr id="top" >
<td>产品名称</td>
<td>产地</td>
<td>厂商</td>
</tr>
<tr>
<td>爱美电视机</td>
<td>福州</td>
<td>爱美电子</td>
</tr>
<tr>
<td>美好微波炉</td>
<td>北京</td>
<td>美好集团</td>
</tr>
<tr>
<td>联想电脑</td>
<td>沈阳</td>
<td>联想集团</td>
</tr>
<tr>
<td>编程词典</td>
<td>长春</td>
<td>明日科技</td>
</tr>
<tr>
<td>编程词典</td>
<td>长春</td>
<td></td>
</tr>
<tr>
<td><p>编程词典</p></td>
<td>长春</td>
<td></td>
</tr>
</table>
<script>
$(document).ready(function(){
$("tr:odd").css("backgroundColor", "yellow");//奇数行
$("tr:even:gt(0)").css("backgroundColor", "pink");//偶数行(去掉第一行)【gt(0)：大于0】
//$("tr:even:not(:first)").css("backgroundColor", "pink");//
//$("tr:eq(0)").css("backgroundColor", "white");//
$('#top>td').css('borderBottom', '2px solid black');
// $('#top>td').css('border-Bottom', '1px solid black');
// $('#top').css('color', 'red');
// $("table").css("borderColor", "black");
//移动变色
var color;
$("tr:gt(0)").hover(function(){
color = $(this).css("backgroundColor");
$(this).css("backgroundColor","#00aa00");
},function(){
$(this).css("backgroundColor",color);
})
//点击事件
$("tr").click(function(){
$(this).css("background","#00ff00")
})
//选择器（过滤）
$("td:empty").css("background","#00cc00") //空的
$("tr:eq(3):parent").css("background","#0000ff") //非空
td:has(p) //有p标签和单元格 （放选择器）
td:contains("长春").css //包含长春的单元格 （只能放文本）
td:visible //所有可见的
});
</script>
</body>
</html>
运行结果
