Question

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

我想点击第3个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，并将您点击的元素传递给该函数。

ChangeListeners

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

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

<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>

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

Answer 2

您必须使用this关键字传递按钮参考。并使用$(elm).closest("tr").find("td").first()选择第一个td。您可以像下面这样做

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您的第一个问题是您使用onclick附加了事件处理程序。这意味着this范围实际上是窗口，而不是单击的元素。要解决这个问题，你可以使用jQuery来附加事件处理程序，就像你已经使用它一样。

然后，您可以获取第一个closest('tr')的{{1}}，然后find()，如下所示：

＆＃13;

td

＆＃13;

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

＆＃13;

Answer 4

您必须像<button>这样alert1()传递alert1(this)的引用。这样您就可以在alert1()内使用此按钮的引用。

＆＃13;

function alert1(_this) {
    alert($(_this).closest("tr").find('td:eq(0)').text());
}

＆＃13;

<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>

＆＃13;

或者您也可以click将<button>列表器添加到JQuery，如下所示：

＆＃13;

$(document).ready(function(){
  $('#b').click(function(){
    alert($(this).closest("tr").find('td:eq(0)').text());
  });
});

＆＃13;

<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>

＆＃13;

您不需要在HTML上使用onclick属性。此外，如果你有很多像这样的按钮，那么使用class选择器而不是我现在使用的id选择器。

Answer 5

试试这个：

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

Answer 6

您已嵌套

中的按钮

<td>

标签，所以

<td>

是它的父母。

您可以这样做：

$("#b").on('click', function(){
    var first = $( this ).parent().siblings().first();
    console.log(first.text()); //Tom
});

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

6 个答案: