<head>
<meta charset="UTF-8">
<title>在标签对象中根据选择器查找</title>
<style>
.table{
margin: 100px auto;
width: 400px;
height: 300px;
text-align: center;
border: solid;
}
tr td{
border: solid;
text-align: center;
border-width: 0px;
margin: 0px;
}
.bg-color{
background-color: fuchsia;
}
table .hover{
background-color: teal;
}
</style>
</head>
<body>
<table class="table">
<tr class="tr">
<td>张三</td>
<td>男</td>
<td>16</td>
<td>
<a href="#">添加</a>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>16</td>
<td>
<a href="#">添加</a>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>16</td>
<td>
<a href="#">添加</a>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>16</td>
<td>
<a href="#">添加</a>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
</table>
<hr>
<div id="show"></div>
</body>
<script src="../0114-jquery-2/js/jquery-1.8.3.js"></script>
<script>
/*点击这一行后可以拿到姓名*/
$(".table tr:odd").addClass("bg-color")
$("table tr").on("mouseenter",function () {
$(this).addClass("hover");
}).on("mouseleave",function () {
$(this).removeClass("hover");
}).on("click",function () {
let realName = $(this).find("td :eq(0)").html();
$("#show").html(realName+"444");
})
</script>
浙公网安备 33010602011771号