$(".table1").click(function(event){ var tr=$(event.target).closest("tr"); var text=tr.find("td:first").text(); console.log(text);改变选中行的颜色
时间: 2023-08-12 07:07:22 浏览: 40
可以使用以下代码来改变选中行的颜色:
```
$(".table1").click(function(event){
var tr = $(event.target).closest("tr");
var text = tr.find("td:first").text();
console.log(text);
tr.addClass("selected").siblings().removeClass("selected");
});
```
然后在 CSS 文件中定义 `.selected` 类的样式,比如:
```
.selected {
background-color: #ccc;
}
```
这样就能实现选中行变色的效果了。
相关问题
$(".table1").click(function(event){ var tr=$(event.target).closest("tr"); var text=tr.find("td:first").text(); console.log(text); $(".table2").empty();点击table选中行,选中行改变颜色,再次点击或点击其他table行则原先改变的行恢复,而再次点击的行改变颜色 具体代码
这是一个基于jQuery的代码,实现了点击表格行来高亮显示选中行,并且再次点击或者点击其他行可以取消选中状态。同时还实现了点击table1的行后,清空table2的内容。
```
$(".table1").on("click", "tr", function(event) {
// 取消其他选中行
$(".table1 tr.selected").removeClass("selected");
// 高亮选中行
$(this).addClass("selected");
// 获取第一列的文本内容
var text = $(this).find("td:first").text();
console.log(text);
// 清空table2
$(".table2").empty();
});
$(".table2").on("click", "tr", function(event) {
// 取消其他选中行
$(".table2 tr.selected").removeClass("selected");
// 高亮选中行
$(this).addClass("selected");
});
```
在上述代码中,我们使用了jQuery的on方法来绑定事件处理程序。我们在table1上绑定了"click"事件,而在table2上绑定了"click"事件。当点击table1的行时,首先取消其他选中行的状态,然后将当前行设为选中状态,并且获取第一列的文本内容和清空table2的内容。当点击table2的行时,同样先取消其他选中行的状态,然后将当前行设为选中状态。
$(this).closest
`$(this).closest` 是 jQuery 中的一个方法,用于查找当前元素的祖先元素中,与指定选择器匹配的最近的一个元素。具体用法如下:
```javascript
$(this).closest(selector)
```
其中,`selector` 是一个字符串,表示要查找的祖先元素的选择器。
举个例子,假设我们有如下 HTML 结构:
```html
<div class="outer">
<div class="inner">
<button class="btn">Click me</button>
</div>
</div>
```
我们想要在点击按钮时,找到最近的 `.outer` 元素,可以这样写:
```javascript
$('.btn').click(function() {
var $outer = $(this).closest('.outer');
// do something with $outer
});
```
这样,当我们点击按钮时,`$outer` 就会被赋值为最近的 `.outer` 元素。