Question

这实际上并不是我目前正在尝试做的事情;我刚刚在另一张桌子上工作时发现我不知道我是怎么做的，而且乘坐火车回家的整个过程让我感到困惑的是不同的解决方案，我无法想象这些解决方案。

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

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

我最初的想法就像是

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

即，

对于文档中的每个按钮，
为该按钮添加事件处理程序
将使用数字对应于该按钮的行的数据makeAjaxCall。

问题当然是makeAjaxCall会在调用i 时检查i 的值，到时为buttons.length等于i，因此该函数只能在表的最后一行上工作。

所以我想你需要找到一些方法来实际硬编码函数处理程序中{{1}}的当前值......这是我不会做的事情。甚至认为是可能的。是吗？你怎么会这样做呢？

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

Answer 2

有趣的问题。我会像@kennebec在上面的评论中所说的那样去做。

这是小提琴：http://jsfiddle.net/u988D/

首先，添加数据属性的标记略有变化

HTML

<table>
    <tr>
        <td data-to-json="id">1</td>
        <td data-to-json="text">Lorem ipsum dolor.</td>
        <td><button type="button">Click Me</button></td>
    </tr>
    <tr>
        <td data-to-json="id">2</td>
        <td data-to-json="text">Lorem ipsum dolor.</td>
        <td><button type="button">Click Me</button></td>
    </tr>
    <tr>
        <td data-to-json="id">3</td>
        <td data-to-json="text">Lorem ipsum dolor.</td>
        <td><button type="button">Click Me</button></td>
    </tr>
</table>

然后是javascript。可能可以进一步优化。

JS

var table = document.querySelector("table")

table.addEventListener("click", function(e) {
    var element = e.target,
        parent

    //If the element is a button
    if ( element && element.nodeName == "BUTTON" ) {
        parent = element.parentNode

        //Find the closest parent that is a TR
        while ( parent.nodeName !== "TR" ) {
            parent = parent.parentNode
        }

        //Convert Row to JSON
        var json = {},
            child

        for ( var i = 0, _len = parent.children.length; i < _len; i++ ) {
            child = parent.children[i]

            if ( child.hasAttribute("data-to-json") ) json[child.getAttribute("data-to-json")] = child.innerText
        }

        // Do your AJAX stuff here
        console.log(json)
    }
})

将事件处理程序添加到每个只会影响该表行的表行？

2 个答案:

HTML

JS