Question

我有一个包含嵌套表的表，如下所示：

我希望实现此目标，以定位嵌套表中的td，并将值放在按钮上。有人可以帮我解决如何在jquery中定位这个问题吗？

<table class="mdl-data-table" style=" width: 100%; ">
  <tr>
    <td>Text </td>
    <td>
      <table class="mdl-data-table ">
        <tr>
          <td> Name: </td>
          <td> </td> -- target content here
          <td> Age : </td>
          <td> </td> -- target content here
        </tr>
      </table>
  </tr>
</table>

Answer 1

试试这个：

$('.mdl-data-table .mdl-data-table tr:first td:odd')

这将定位到您桌子第一行的第二个和第四个td。

工作演示：

$('.mdl-data-table .mdl-data-table tr:first td:odd')
  .each(function() {
    $(this).text('test');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mdl-data-table" style=" width: 100%; ">
  <tr>
    <td>Text </td>
    <td>
      <table class="mdl-data-table ">
        <tr>
          <td> Name: </td>
          <td> </td> -- target content here
          <td> Age : </td>
          <td> </td> -- target content here
        </tr>
      </table>
  </tr>
</table>

Answer 2

您可以使用.has然后找到具体的td。

console.log($( "td" ).has( "table" ).find("td:eq(1)").text())
console.log($( "td" ).has( "table" ).find("td:eq(3)").text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mdl-data-table" style=" width: 100%;" border="1">
  <tr>
    <td>Text </td>
    <td>
      <table class="mdl-data-table ">
        <tr>
          <td> Name: </td>
          <td> -- target content here 1 </td>
          <td> Age : </td>
          <td> -- target content here 2</td> 
        </tr>
      </table>
  </tr>
</table>

将嵌套的td定位在表中

2 个答案: