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

来源：互联网发布：数字最优化的方法编辑：程序博客网时间：2024/06/06 20:11

起始状态

鼠标单击选中行

删除选中的行

<!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>

阅读全文

0 0