您的位置：首页 > 其它

事件冒泡删除Table的一行

2016-12-15 14:51 330 查看

onclick事件冒泡

在实际应用中，特别是写系统的后台管理的时候table的相关操作就显得格外重要。不合理的事件添加会影响效率。

具体的代码见下面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oTab = document.getElementsByTagName('table')[0];

oTab.onclick = function(ev){
var tab = this;
var ev = ev || window.event;
var oTr = ev.target.parentNode.parentNode;
if(oTr.nodeName.toLowerCase() === 'tr'){
tab.deleteRow(oTr.rowIndex);
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>Vamous</td>
<td>19</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>Vam</td>
<td>20</td>
<td><a href="#">删除</a></td>
<

/tr>
</table>
</body>
</html&g
bf76
t;


在这个页面中就是简单的写了一个table表格，只是在数据所对应的tr行包含了一个“删除”的标签，而这个做到的仅仅只是给使用者来看的，真的点击之后的删除事件我是加在了table上，利用ev.target.parentNode.parexNode获得了当前点击的那一行，很好的就是table中有rowInde这个属性，刚好和deleteRow这个函数结合实用，省去了一定的麻烦。

事件的不合理添加会影响页面的加载效率，特别是添加重复的事件的时候，可以合理的利用事件冒泡和捕获处理相对应的情况
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航