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

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

新手问题

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


如果给每一个按钮绑定事件,显然会很麻烦。
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)

这样是比较优雅的方案。


这个需要你懂一些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,就可以对他操作了.

【热门文章】
【热门文章】