如何从一个html表格中 定位到一行数据

Question

新手问题

用一个循环生成了一个bootstrap table，如下图。如何在点击某一行按钮的时候能定位到此行的数据。

Answer 1

如果给每一个按钮绑定事件，显然会很麻烦。
DOM事件会经历两个阶段，事件捕获和事件冒泡，所以每次点击table标签里的按钮，事件会从点击的button冒泡到table标签，所以你可以这样：

var table=document.getElementsByTagName('table')[0]
table.addEventListener('click',function(event){
    if(event.target.nodeName.toLowerCase()==='button'){
        //此时event.target指向正在被点击的button按钮，要获取此行数据，
        //可以利用event.target.parentNode获取父节点及父节点
        //里面的内容以此区分不同的点击项，也可以通过indexOf的方法
        //确定event.target.parentNode在它的父节点中的index.
        //some actions here
    }
},false)

这样是比较优雅的方案。

Answer 2

这个需要你懂一些js, 你可以给按钮上绑定一些数据,一般是id之类的(也可以把整条数据以json对象绑定),大概就是这样写:

<button type="button" class="btn btn-info btn-sm editbtn" 
data-itemId="{{ s.getId() }}"></button>

jq获取id
$('.editbtn').on('click', function(){
    var Id = $(event.target).data("itemid");
    //其他处理
});

在页面js中当按钮被点击后,根据事件源获取到按钮,得到它绑定的id,就可以对他操作了.