表格中的删除、增加、修改触发方法

      今天看到一段表格中触发操作方法的代码，和自己之前写的不太一样。

      比如一个表格，我会在每一个要触发操作的地方用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="#" onclick="showDetail(this);">XXXX</a> </td>
        <!--<td class="center">Lorem ipsume</td>-->
        <td>XXXXXXX</td>
        <td>XXXXXXXX</td>
        <td class="operation"><a href="" onclick="deleteOperate(this)">删除</a></span>
            <a href="" onclick="modifyOperate(this)">修改</a></span>
            <a href="" onclick="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="#" onclick="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;
            }

        }