上一篇
html如何使tr点击变色
在HTML中，要使表格的行（tr）点击变色，可以使用JavaScript或jQuery来实现，这里我将分别介绍使用JavaScript和jQuery的方法。
1、使用JavaScript实现tr点击变色：
我们需要为表格的每一行添加一个点击事件监听器，当用户点击某一行时，我们将改变该行的背景颜色，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Tr点击变色示例</title>
<style>
table {
width: 100%;
bordercollapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
textalign: left;
}
tr:nthchild(even) {
backgroundcolor: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr onclick="changeColor(this)">
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr onclick="changeColor(this)">
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
<script>
function changeColor(row) {
row.style.backgroundColor = row.style.backgroundColor === 'rgba(0, 0, 0, 0.1)' ? '#fff' : 'rgba(0, 0, 0, 0.1)';
}
</script>
</body>
</html>
在这个示例中，我们首先为表格的每一行添加了一个onclick属性，当用户点击这一行时，将调用changeColor函数，在changeColor函数中，我们通过判断当前行的背景颜色是否为半透明黑色（rgba(0, 0, 0, 0.1)），来决定是将背景颜色设置为白色还是保持为半透明黑色，这样，每次点击行时，都会在这两种颜色之间切换。
2、使用jQuery实现tr点击变色：
如果你的项目中已经引入了jQuery库，那么可以使用jQuery的toggleClass方法来实现tr点击变色，以下是一个简单的示例：
<div >
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr >
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr >
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
<button id="resetBtn">重置颜色</button>
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$(".clickable").on("click", function () {
$(this).toggleClass("active");
});
$("#resetBtn").on("click", function () {
$(".clickable").removeClass("active");
});
});
</script>
</div>
在这个示例中，我们首先为需要点击变色的表格行添加了一个名为clickable的类，我们使用jQuery的on方法为这些行添加了一个点击事件监听器，当用户点击这些行时，我们将调用toggleClass方法，为这些行添加或移除一个名为active的类，这个类可以定义在CSS中，
.active {
backgroundcolor: #f2f2f2; /* 你希望激活时显示的颜色 */
}
我们还添加了一个“重置颜色”按钮，当用户点击这个按钮时，将移除所有行的active类，恢复默认颜色。
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/299508.html
