今天看到一段表格中触发操作方法的代码,和自己之前写的不太一样。
比如一个表格,我会在每一个要触发操作的地方用a标签,并用onclick指定方法:
<table class="table table-striped table-hover table-bordered" id="listTable">
<thead>
<tr>
<th>序号</th>
<th style="width:50%;">名称</th>
<th>XX</th>
<th>XX</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="#" οnclick="showDetail(this);">XXXX</a> </td>
<!--<td class="center">Lorem ipsume</td>-->
<td>XXXXXXX</td>
<td>XXXXXXXX</td>
<td class="operation"><a href="" οnclick="deleteOperate(this)">删除</a></span>
<a href="" οnclick="modifyOperate(this)">修改</a></span>
<a href="" οnclick="addOperate(this)">增加</a></span>
</td>
</tr>
</tbody>
</table>
别人是这样写的,用class进行区别,在js中去对应操作:
<table class="table table-striped table-hover table-bordered" id="listTable">
<thead>
<tr>
<th>序号</th>
<th style="width:50%;">名称</th>
<th>XX</th>
<th>XX</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="#" οnclick="showDetail(this);">XXXX</a> </td>
<!--<td class="center">Lorem ipsume</td>-->
<td>XXXXXXX</td>
<td>XXXXXXXX</td>
<td class="operation"><span class="delete">删除</span>
<span class="modify">修改</span>
<span class="add">增加</span></td>
</tr>
</tbody>
</table>
js代码:
//为每行元素添加事件 var table = document.getElementById('listTable'); var tr = table.children[1].rows; for (var i = 0; i < tr.length; i++) { //将点击事件绑定到tr元素 tr[i].onclick = function (e) { var e = e || window.event; var el = e.target || e.srcElement; //通过事件对象的target属性获取触发元素 var cls = el.className; //触发元素的class //通过判断触发元素的class确定用户点击了哪个元素 switch (cls) { case 'delete': //点击了删除 var conf = confirm('确定删除此项目吗?'); if (conf) { deleteOperate(this); /*this.parentNode.removeChild(this);*/ } break; case 'add': //点击了增加 addOperate(this); break; case 'modify': //点击了修改 modifyOperate(this); break; } }