iview table增加一行减少一行_如何实现表格中鼠标划过一行整行变色，点击一行选中一行？...

刺骨的言语ヽ痛彻心扉 2023-01-03 14:05 306阅读 0赞

![420442371a3fed3f9d02991423d1521e.png][]

（记得先引入js文件哦）

1.首先我们需要一个简单的表格。下面是我的表格。

![b205ded8a275dff4c4cf38889bf1c64b.png][]

注：有些表格默认没有边框，所以需要自己手动设置。（下面是我手动添加的样式表，放在style标签内）

![7f4e34435133f90d02a34669e469ab2f.png][]

2.这里是关键的部分，实现鼠标点击某一行后，将该行标为高亮。

![a14770eb3c224c3eed219b19560936b7.png][]

注：这里的select是一个自己写的一个样式。tr:hover\{\}是为鼠标划过的某一行增加一个效果。(!impartant是提高该样式的优先级，否则hover的颜色就会盖在select设置颜色的上面，鼠标移开才能看到，而我们希望是鼠标点击tr就变色)，当然可以不设置这个hover，则只有点击才会产生变化。

![9c94370c53ce8d6c2b50f65bfc240152.png][]

注：

（1）$("\#\_table").find(“tr”).click() 这里的 \_table是我们设置的table的id，若是其他id需要用自己设置的id替换掉\_table, 这里这句话表示的意思是，找到id为\_table这个表格的tr，点tr被点击时就执行click事件。

（2） $("\#\_table").find(“tr”).removeClass(“select”)这句话的意思是找到所有tr移除它们的样式（如果不这样那么每点击一行，这一行就会被高亮并且其他行的高亮不会被取消，如果做多选效果可以不要这句话）。我们在选择前先将所有行样式移除就可以做到只高亮一行的效果。

（3） $(this).addClass(“select”); $(this)表示我当前选中的这个tr，整句话表示为选中的当前行添加我们设置的样式。

3.运行效果

（1）这个是鼠标悬停在某一行的效果

![b44356235973105e7c933fd47733c965.png][]

（2）鼠标选中一行后移开（还未选中另一行）

![6362c137d8ddadeb5e88bf23443a5567.png][]

4.下面附上完整的代码（我的是用vs写的一个.aspx文件）

![37817f85aad84307fe00f353aa046999.png][]

**————————————————**

**原文链接：**

如何实现表格中鼠标划过一行整行变色，点击一行选中一行\_qq\_40422692的博客-CSDN博客blog.csdn.net

![c638f05caf3d8fab3354e7de6abc68a6.png][]

[420442371a3fed3f9d02991423d1521e.png]: /images/20221119/4da3063d9ffa41aa96e7ac67485de291.png
[b205ded8a275dff4c4cf38889bf1c64b.png]: /images/20221119/a1071d3c5aff470c92e46ea9107d797d.png
[7f4e34435133f90d02a34669e469ab2f.png]: /images/20221119/21f3e3970e294e2f85d0966449a9b1f0.png
[a14770eb3c224c3eed219b19560936b7.png]: /images/20221119/e50b2cf590b24a71b20ddb7693260b68.png
[9c94370c53ce8d6c2b50f65bfc240152.png]: /images/20221119/e01467cb55f3413393372e5ec80499e4.png
[b44356235973105e7c933fd47733c965.png]: /images/20221119/5214f620418643e5bdd5a6463c3ed215.png
[6362c137d8ddadeb5e88bf23443a5567.png]: /images/20221119/8779baaea972452e83cba882e45ce26f.png
[37817f85aad84307fe00f353aa046999.png]: /images/20221119/51671add403a4ad0bdb077233bfb0ce9.png
[c638f05caf3d8fab3354e7de6abc68a6.png]: /images/20221119/0c2a2d1b07fd40eaa639355fd8eb1e68.png