请教一个js的问题。获取表格点击所在的行
<table class=“table table-striped table-bordered” style=“text-align:center;”> <tr > <td >学号</td> <td>姓名</td> <td>近期详情</td> </tr> <% results.forEach(function(result,index){%> <tr> <td><%=result.s_id%></th> <td><%=result.name%></td> <td><button>近期详情</button></td> </tr> <%})%> </table>
var tab=document.querySelector("table");
tab.addEventListener("click",function(e){
var event=e || window.event; // 获取事件
var srcEvent=event.srcElement || event.target; // 获取事件目标
///求教
});
请问，如何获得点击的button 是哪一行的？谢谢。
9 回复
function(e){
var event=e || window.event; // 获取事件
var srcEvent=event.srcElement || event.target; // 获取事件目标
///求教
}
改成这样：
function listener(line) {
return function(e){
var event=e || window.event; // 获取事件
var srcEvent=event.srcElement || event.target; // 获取事件目标
///求教
};
}
在第一行加 listener(1)，第二行加listener(2) …
如果你点的是 button, 那么 srcElement 回是这个 button
// 非button点击
if(srcElement.nodeName !== 'BUTTON') return;
var tr = srcElement.parentNode;
while(tr.nodeName !== 'TR') tr = srcElement.parentNode;
// 第几行
var table = this;
var index = table.children.indexOf(tr);
其实我不太懂为什么都在去 jQuery
$('table').on('click', 'button', function(){
var $tr = $(this).closest('tr');
var index = $tr.index();
});
- 时间委托, 省去了你手动判断target 是不是想要的
- closest / index 等方法很好用
lz真心是入门级的。记住，表现层的东西永远应该有一个业务实体。所以无论你用jquery还是别的，都要有一个array相对应。好吧说了那么多，用vue吧，你要做的只要监控好实体，别的事情vue就自动帮你搞定了。