javascript - JQuery通过单击同一行上的按钮获取第一个td

Question

这可能是一个简单的问题，但是我尝试了一切，但没有成功。

我想单击第三个 td 上的按钮来获取第一个 td 的文本。 HTML 代码如下所示:

<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Btton</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>21</td>
        <td><input type="button" id="b" value="alert" onclick="alert1();" /></td>
    </tr>
</table>

正如我提到的，我尝试了不同的事情，例如

function alert1() {
    alert($(this).closest("tr").first().text());
}

但是，它会发出空框警报。不确定我做错了什么。

感谢您的宝贵时间。

Answer 1

您可以使用.find ，并将您单击的元素传递给该函数。

function alert1(elm) {
    alert($(elm).closest("tr").find("td:first-child").text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Btton</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>21</td>
        <td><input type="button" id="b" value="alert" onclick="alert1(this);" /></td>
    </tr>
</table>

或者您可以使用event listener在 jQuery 中

$("#b").on('click', function() {
  alert($(this).closest("tr").find("td:first-child").text());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Btton</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>21</td>
        <td><input type="button" id="b" value="alert" /></td>
    </tr>
</table>