javascript - 使用带有 javascript 的层次结构 css(没有 id/classes)获取 td 表的值

Question

我正在尝试使用 javascript 和 css 来获取 td 值的值。这是我的代码:

当我单击元素时，此代码返回第一个 td 的值，但我的警报未定义。

如何解决？

var ee = $(".table tr td:nth-child(1)").attr('value');

$(".table").on('click', function (e) {
    e.preventDefault();    
    alert(ee);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
</table>

Answer 1

<td>没有值，这就是原因:

var ee = $(".table tr td:nth-child(1)").text();

$(".table").on('click', function (e) {
    e.preventDefault();    
    alert(ee);
});

你的点击事件没问题。您只是抓取了一个未定义的项目，因此警报的行为是这样的。您需要抢<td>--this--</td>

有用的建议:

这不会为您提供第一个 <td> 的文本，因为这不是第 n 个 child 的工作方式。如果您想要这样，请尝试将其作为选择器:

var ee = $(".table tr td:eq(0)").text();

0 是第一个，1 是第二个，2 是第三，等等

您还可以删除函数标题中的 e.preventDefault() 和 e。与表单或按钮不同，表格没有默认操作。