怎么用JS控制表格中<tr>的onmouseover和onmouseout事件

Posted 2023-04-10

让鼠标悬浮在每一行时行的颜色变化，离开第一行时颜色变化
是离开每一行时颜色变化

循环所有行，给每行添上这两个事件。
每一行都用一个<a></a>
然后写<a>的CSS
<style type="text/css">
<!--
a.tra : hover color: #FF00FF;
-->
</style>
<table width="200" border="0">
<tr><a class="tra">
<td style="">efdsfaf</td>
<td>dsfdfa</td></a>
</tr>
<tr><a class="tra" >
<td>sdfsaf</td>
<td>dfasdfsdf</td></a>
</tr>
</table> 参考技术A 每一行都用一个<a></a>
然后写<a>的CSS
<style type="text/css">
<!--
a.tra : hover color: #FF00FF;
-->
</style>
<table width="200" border="0">
<tr><a class="tra">
<td style="">efdsfaf</td>
<td>dsfdfa</td></a>
</tr>
<tr><a class="tra" >
<td>sdfsaf</td>
<td>dfasdfsdf</td></a>
</tr>
</table>
这样应该就可以了 参考技术B 每一行都用一个<a></a>
然后写<a>的CSS
<style type="text/css">
<!--
a.tra : hover color: #FF00FF;
-->
</style>
<table width="200" border="0">
<tr><a class="tra">
<td style="">efdsfaf</td>
<td>dsfdfa</td></a>
</tr>
<tr><a class="tra" >
<td>sdfsaf</td>
<td>dfasdfsdf</td></a>
</tr>
</table>本回答被提问者采纳 参考技术C 定义个javascript函数
<script>
function a()
alert("1");

</script>

<tr onmouseover()='javascript:a();'><tr>
或者直接 <tr onmouseover()='javascript:alert("1");'><tr> 参考技术D $("#ID").mouseover(function()
alert();

)

这样写

tr没有id属性怎么用js删除

<td>
<button class="btn btn-xs btn-default" onclick="delTableRow()"><%-- alert($item.id) delTableRow(this) ) --%><i class="icon-remove"></i> </button>
</td>
没有id属性，在不加id的情况下怎么用js动态删除table的行？

参考技术A var delTableRow = function(btn)
var tr = btn.parentElement.parentElement;

var tbody = tr.parentElement;

tbody.deleteRow(tr.rowIndex);



---------------------

<td>
<button class="btn btn-xs btn-default" onclick="delTableRow(this)"><%-- alert($item.id) delTableRow(this) ) --%><i class="icon-remove"></i> </button>
</td>追问

这样的话不是点击哪个删除哪个啊，效果不行啊

追答

拜托，你也没有说要删除哪行啊，默认的不就是删除这个按钮所在的行么

追问

按照你的代码试了试，
点击的时候，不是点击哪个删除哪个。而是最后删除最后一个，不知道怎么搞得？

本回答被提问者和网友采纳