Question

<tbody>
    <tr>
        <td>Name1</td>
        <td>Position1</td>
        <td>Operation1</td>
    </tr>
    <tr>
        <td>Name2</td>
        <td>Position2</td>
        <td>Operation2</td>
    </tr>
</tbody>

当我点击同一<td>内的最后<td>时，我需要在第一个<tr>中获取字符串，例如，如果我单击<td>包含“Operation1”，我可以得到一个值为“Name1”的字符串。这该怎么做？（实际上，不同<td> s之间的字符串没有任何关系，就像这里的后缀一样）哦，顺便说一句，这个表是使用jQuery Datatables插件创建的。

非常感谢！

Answer 1

有多种方法可以做到这一点，例如：

$('td').parent().children().filter('td:first');
$('td').parent('tr').find('td:first');
$('td').siblings('td:first');

Here's a jsFiddle example.

Answer 2

使用此：

$(document).on('click', 'td:last', function(){
    $(this).siblings(':first')
})

Answer 3

以下是静态页面的仅Javascript解决方案，它将事件侦听器附加到tr并拦截其子项的单击事件。 tr的内容可以是动态的。

Array.prototype.forEach.call(document.getElementsByTagName("table"), function (table) {
    Array.prototype.forEach.call(table.getElementsByTagName("tr"), function (tr) {
        tr.addEventListener("click", function (evt) {
            var children = this.children,
                length = children.length;

            if (length && children[length - 1] === evt.target) {
                alert(children[0].firstChild.nodeValue);
            }
        }, false);
    });
});

在jsfiddle

上

以jquery术语表示

$("table tr").on("click", function (evt) {
    var target = $(evt.target);

    if (target.parent().children().last().get(0) === evt.target) {
        alert(target.parent().children().first().text());
    }
});

在jsfiddle

上

或者不是每个tr元素设置一个事件监听器（＆＃34;冒泡＆＃34;），你也可以使用event＆＃34; bubbling＆＃34;并将它一直移动到document（那些在jquery上称为事件委派，jquery.on），如果你在表中添加和删除行，甚至整个行，这将允许一个非常动态的系统表。

document.addEventListener("click", function (evt) {
    var target = evt.target;

    if (target.nodeName === "TD" && target.parentNode.children[target.parentNode.children.length - 1] === target) {
        alert(target.parentNode.children[0].firstChild.nodeValue);
    }
}, false);

在jsfid d le

上

或使用jquery委派

$(document).on("click", "td", function (evt) {
    var target = $(evt.target);

    if (target.parent().children().last().get(0) === evt.target) {
        alert(target.siblings().first().text());
    }
});

在jsfiddle

上

如何在td中点击一个td，这个td比第一个td晚，但在同一个tr中？

3 个答案: