Question

为什么这不起作用$(this).parents("tr").find("td:eq(2)").html()

我似乎无法获得相对于调用它的getthis td的文字“tr”

<table>

    <tr>
        <td>1</td>
        <td>getthis</td>
        <td onclick="$(this).parents("tr").find("td:eq(2)").html()">4</td>
        <td>5</td>
    </tr>

    <tr>
        <td>1</td>
        <td>getthis</td>
        <td onclick="$(this).parents("tr").find("td:eq(2)").html()">4</td>
        <td>5</td>
    </tr>

        <tr>
        <td>1</td>
        <td>getthis</td>
        <td onclick="$(this).parents("tr").find("td:eq(2)").html()">4</td>
        <td>5</td>
    </tr>

    <tr>
        <td>1</td>
        <td>getthis</td>
        <td onclick="$(this).parents("tr").find("td:eq(2)").html()">4</td>
        <td>5</td>
    </tr>   

</table>

Answer 1

您使用双引号太多了。在线创建字符串时，您不小心结束了onclick属性。此外，eq为零索引，因此您需要1。

更好（但只是因为它有效）：

<td onclick="$(this).parents('tr').find('td:eq(1)').html()">4</td>

最佳：

$("table").on("click", "td:nth-child(2)", function(e) {
    $(this).prev().html();  //Get the previous sibling's HTML without inline JS
});

Answer 2

您应该使用<script>块中的一小块代码替换重复的内联事件处理程序（容易出错且过时）：

这使用在整个表上注册的单个“委托”处理程序，但只收听第3列的点击：

$('table').on('click', 'td:nth-child(3)', function() {
    alert($(this).prev().html());
});

[此代码当然应该出现在$(document).ready()处理程序中，以确保它在加载DOM之后才会运行。

Answer 3

您实际的问题是您使用双引号来分隔您的onclick，但也使用jQuery。它应该是：

 onclick="$(this).parents('tr').find('td:eq(1)').html()"

但更好：只需使用prev() JQuery Doc

$(this).parents("tr").find("td:eq(2)").html()

会变成

$(this).prev().html();

Alnd将这些点击处理程序放在一个单独的函数中（尽管可能的话，你可能想要使用一个类（例如click）来解决相应的问题）：

$('table').on('click', 'td.click', function() {
    alert($(this).prev().html());
});

Answer 4

<table>
    <tr>
        <td>1</td>
        <td>getthis</td>
        <td class="clickMe">4</td>
        <td>5</td>
    </tr>
</table>

<script>
$(".clickMe").click(function() {
    alert(this.parentNode.children[1].innerText);
});
</script>

以下是一个有效的例子：http://jsfiddle.net/sme7c/1

Answer 5

尝试使用closest代替parents

Answer 6

您的代码存在许多问题。

您在jQuery代码中使用双引号，但尚未对它们进行转义，因此您过早地结束了该属性，并生成了无效的HTML。
jQuery代码只返回一个字符串，但不会执行任何内容，因此您不应期望看到任何内容。
您的元素索引可能有误;元素从0开始索引，而不是1，因此:eq(2)返回第三个元素，而不是第二个元素。或者，换句话说，您的代码会找到完全相同的元素。

从td中找到td文本，点击相同的tr

6 个答案: