javascript - 向每个表行添加仅影响该表行的事件处理程序？

Question

这实际上并不是我目前正在尝试做的事情；当我与另一张 table 一起工作时，我突然想到我不知道该怎么做，在回家的火车上我一直在思考不同的解决方案，但我无法想象其中的可行。

想象一下这种情况:有一个 50 行的表。每行都有一个按钮。单击时，此按钮应该对其所在的行执行某些操作 - 例如，将其所有文本添加删除线，或者使用第一个单元格的值进行 AJAX 调用，等等。

您将如何绑定(bind)这些事件处理程序？

我最初的想法是这样的

buttons = document.getElementsByTagName("input");
rows = document.getElementsByTagName("tr");
for (i=0;i<buttons.length;i++) {
    buttons[i].addEventListener('click',function() {
        makeAjaxCall(rows[i]);
    }); 
};

也就是说，

1. 对于文档中的每个按钮，
2. 向该按钮添加事件处理程序，
3. 这将使用按钮对应的行的数据进行Ajax调用。

当然，问题在于 makeAjaxCall 会在调用时检查 i 的值，此时， i 等于 buttons.length，因此该函数仅适用于表格的最后一行。

所以我想你需要找到某种方法来在函数处理程序中实际硬编码 i 的当前值......而我什至认为这是不可能的。是吗？您实际上会如何做这样的事情？

Answer 1

您可以使用“this”引用要添加事件监听器的按钮对象

给定这种格式的表格

<table>
    <tr>
        <td> <input type='button'> </td>
        <td> 1st <td>
    </tr>
    <tr>
        <td> <input type='button'> </td>
        <td> 2nd <td>
    </tr>
    <tr>
        <td> <input type='button'> </td>
        <td> 3rd <td>
    </tr>
</table> 

以下代码将允许您访问下一个单元格中的数据，使用 console.log() 而不是任何 ajax 调用显示。

buttons = document.getElementsByTagName("input");
for (i=0;i<buttons.length;i++) {
    buttons[i].addEventListener('click',function() {
        makeAjaxCall(this);
    }); 
};

function makeAjaxCall(btn) {
    var sib=btn.parentNode.nextSibling;
    while (sib.nodeName !='TD') {
        sib=sib.nextSibling;
    }
    console.log(sib.innerHTML);
}

这可以扩展以查找行中的任何数据。

本节

while (sib.nodeName !='TD') {
   sib=sib.nextSibling;
}

跳过单元格之间的任何无关字符(空格等)。

Fiddle Here