javascript - 将 div 插入到表格的精确单元格中

Question

有没有办法插入div

<div class="inner">
  <p>The 1st paragraph</p>
  <p>The 2nd paragraph</p>
</div>

进入表格的精确单元格？

纯 JS 或 jQuery 都可以，尽管纯 JS 会更好一些。

<table>
  <tr>
    <td>Just an empty cell</td>
    <td>
      <!-- ........ point to insert ........ -->
    </td>
  </tr>
  <tr>
    <td>Just an empty cell</td>
    <td>Just an empty cell</td>
  </tr>
</table>

<style>
table, tr, td { border: 1px solid black; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
td { padding: 0; }
</style>

Answer 1

如果你想在表格的第二个td中插入，可以试试这个

var d='<div class="inner"><p>The 1st paragraph</p><p>The 2nd paragraph</p></div>';
$("table td").eq(1).html(d);

或者，如果您为特定的 td 设置了 id，则可以将其用作 jQuery 选择器

<td id="myEmpty"></td>

你的 jQuery 代码将是

$("#myEmpty").html(d);

或者，如果您想将标记从 DOM 移动到此单元格，

var d=$('div.inner');
$('div.inner').remove();
$("table td").eq(1).html(d);

为您的 div 提供一个 id 并将其用作 jQuery 选择器而不是使用类名选择器可能是一个好主意(因为您可以拥有多个具有相同 css 类的项目)