Question

Iam尝试在点击其中的按钮时获取td中的值。我使用下面的代码，只得到空白值。

所以我试图改变css以查看它是否选择了特定的td。然后
$(this).parents('tr td:nth-child(8)').css('color','red'); 没有工作，但

$(this).parents('tr').css('color','red');

工作并将所有td中的行数据设为红色。为什么这个？

Answer 1

第一个代码示例的问题是td:nth-child(8)不是this中引用的元素的父级，tr是。

要解决此问题，您需要对parents()和find()使用单独的调用，如下所示：

$(this).parents('tr').find('td:nth-child(8)').css('color','red');

另请注意，假设您只想找到即时的tr父元素，您可以将parents()替换为closest()，以略微提高效果。

Answer 2

您可以使用.text()获取点击TD上的文字。

＆＃13;

$('td').click(function(){
   var num = $(this).text();
   alert(num);
});

＆＃13;

table{border-collapse:collapse;}
td{padding:5px;border:1px solid #ccc;}
.here{background:yellow;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table>
  <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  <tr><td>Cell</td><td>Cell</td><td class="here">8675309</td></tr>
  <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</table>

＆＃13;

如果您还要在TD中找到要单击的按钮，请获取与按钮位置相关的所需文本：

＆＃13;

$('#btnMyDiv').click(function(){
   var num = $(this).closest('td').find('div').text();
   alert(num);
});

＆＃13;

table{border-collapse:collapse;}
td{padding:5px;border:1px solid #ccc;}
.here{background:yellow;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table>
  <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  <tr><td>Cell</td><td>Cell</td><td class="here">
    <div id="myDiv">555-1212</div>
    <button id="btnMyDiv">Click Me</button>
    </td></tr>
  <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</table>

＆＃13;

这就是你如何从不同的TD获取数据：

＆＃13;

$('#btnMyDiv').click(function(){
   var num = $(this).closest('tr').find('td:nth-of-type(2)').text();
   alert(num);
});

＆＃13;

table{border-collapse:collapse;}
td{padding:5px;border:1px solid #ccc;}
.here{background:yellow;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table>
  <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  <tr><td>Cell</td><td>YabaDabaDoo</td><td class="here">
    <div id="myDiv">555-1212</div>
    <button id="btnMyDiv">Click Me</button>
    </td></tr>
  <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</table>

＆＃13;

如何通过单击按钮获取td中的值

2 个答案: