如何使用jQuery定位嵌套表格内的td并实现点击按钮赋值？

没问题，这事儿用jQuery很容易搞定！我给你几种不同的实现思路，你可以根据自己的场景选择：

1. 基于文本内容定位（适合固定文本的场景） #

如果嵌套表格里的Name:文本是固定不变的，你可以通过这个文本找到对应的td，再定位它的下一个兄弟td（也就是你要赋值的目标）：

// 给按钮绑定点击事件
$('button').click(function() {
  // 层层定位到目标td：外层表格 → 嵌套表格 → 包含"Name:"的td → 下一个td
  const targetTd = $('.mdl-data-table .mdl-data-table td:contains("Name:")').next('td');
  // 给目标td设置文本内容（如果需要插入HTML用.html()）
  targetTd.text('John Doe');
});

2. 基于DOM索引定位（更精准，不受文本变化影响） #

如果担心Name:文本可能会修改，或者想更精准地通过位置定位，可以利用表格的行和列索引来找到目标td：

你的嵌套表格第一行的td顺序是：Name: → 目标td → Age: → ...，所以目标td是该行的第2个td（索引从0开始）：

$('button').click(function() {
  // 定位逻辑：外层表格 → 嵌套表格 → 第一行 → 第2个td
  const targetTd = $('.mdl-data-table .mdl-data-table tr').eq(0).find('td').eq(1);
  targetTd.text('John Doe');
});

3. 给目标TD加类（最推荐，维护性最强） #

如果可以修改HTML结构，最省心的方式是给目标td加一个专属class，这样定位起来直接又清晰：

修改后的HTML片段：

<table class="mdl-data-table" style=" width: 100%; ">
  <tr>
    <td>Text </td>
    <td>
      <table class="mdl-data-table ">
        <tr>
          <td> Name: </td>
          <td class="name-target"></td> <!-- 加个专属class -->
          <td> Age : </td>
          <td>...</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

对应的jQuery代码就非常简洁了：

$('button').click(function() {
  $('.name-target').text('John Doe');
});

小提示 #

• 如果需要插入富文本内容，把.text()换成.html()即可，比如targetTd.html('<strong>John Doe</strong>')
• 确保你的jQuery代码是在DOM加载完成后执行的，可以把代码放在$(document).ready(function() { ... })里面，或者把script标签放在HTML末尾。

内容的提问来源于stack exchange，提问作者crazydev