$(".table1").click(function(event){ var tr=$(event.target).closest("tr"); var text=tr.find("td:first").text(); console.log(text); $(".table2").empty();点击选中行,选中行改变颜色,再次点击或点击其他行则原先改变的行恢复,而再次点击的行改变颜色 具体代码
时间: 2024-03-01 19:50:31 浏览: 26
这是一个基于jQuery的表格操作代码,实现了点击选中行,选中行改变颜色,再次点击或点击其他行则原先改变的行恢复,而再次点击的行改变颜色的功能。具体代码如下:
```javascript
$(".table1").click(function(event){
var tr = $(event.target).closest("tr");
if (tr.hasClass("selected")) {
tr.removeClass("selected");
$(".table2").empty();
} else {
$(".table1 tr.selected").removeClass("selected");
tr.addClass("selected");
var text = tr.find("td:first").text();
$(".table2").html("<p>You selected " + text + "</p>");
}
});
```
这段代码首先给表格添加了一个点击事件监听器,当用户点击表格中的某一行时,会触发该事件。接着,代码使用closest函数查找被点击的行,并判断该行是否已经被选中。如果该行已经被选中,则移除选中状态并清空表格二的内容;否则,代码先清除已选中的行的选中状态,然后给当前行添加选中状态,并获取该行第一个单元格的文本内容,最后在表格二中显示选中的内容。
需要注意的是,该代码只对class为table1的表格生效,如果你的表格class不同,需要将代码中的table1替换为你自己的表格class。