鼠标单击的行反色，删除选定的行

最新推荐文章于 2021-07-19 10:55:58 发布

原创最新推荐文章于 2021-07-19 10:55:58 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

本文介绍了一个简单的HTML页面示例，通过JavaScript实现了表格行的单击选中及反色显示功能，并提供了删除选中行的功能。适用于前端开发者学习表格操作及事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起始状态

鼠标单击选中行

删除选中的行

<!doctype html>

<html>
<head>

<style>

</style>
<script>
var tar;//保存被选中的行元素
var flag=0;//是否有行刚刚被单击过标志位
function cli(event){//鼠标单击事件
if(typeof(tar)!="undefined"){//如果已有单元格被点击过
tar.style.backgroundColor="white";//将前面被点击的行恢复原色
tar.style.color="black";
}
tar= event.target.parentNode;//获取被点击的行
tar.style.backgroundColor="black";//将被点击的行反色
tar.style.color="white";
flag=1;
}
function delrow(){
var c=document.getElementById('mytable');//获得表格的信息
if(flag==1){//如果刚刚有一行被单击过
c.deleteRow(tar.rowIndex);//删除被选中的行
flag=0;//标志复位
}
}
</script>
<meta charset="UTF-8">
</head>
<body>
<p><input type="button" value="删除行" onclick="delrow()" ></p>
<table frame="border" rules="all" id="mytable">
<caption>测试表</caption>
<tr onclick="cli(event)">
<td>单元格1</td><td>单元格1</td>
</tr>
<tr onclick="cli(event)">
<td>单元格2</td><td>单元格2</td>
</tr>
<tr onclick="cli(event)">
<td>单元格3</td><td>单元格3</td>
</tr>
</table>
</body>
</html>