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

或者，如果您将id设置为特定的td，则可以将其用作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类的项目）可能是个好主意。

Answer 2

您可以使用td选择器选择第一个tr的{{1}}，并将table tr:first td:last添加到其中，如下所示。

＆＃13;

html

＆＃13;

$('table tr:first td:last').html('<div class="inner"><p>The 1st paragraph</p><p>The 2nd paragraph</p></div>')

＆＃13;

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

＆＃13;

Answer 3

您可以使用此代码执行此操作：

＆＃13;

<div ng-repeat="item in items"> 
    {{item.value1}} {{item.value2}}
</div>

＆＃13;

$(function() {
  $('.inner').detach().appendTo('table tr:eq(0) td:eq(1)');
});

＆＃13;

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

＆＃13;

Answer 4

这是一个简单的Javascript实现。

＆＃13;

var cells = document.getElementsByTagName('td');
cells[1].innerHTML = '<div class="inner"><p>The 1st paragraph</p><p>The 2nd paragraph</p></div>';

＆＃13;

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

＆＃13;

Answer 5

我会用id标记元素，然后使用getElementById（“thatId”）。innerHTML

Answer 6

这是一个纯JavaScript解决方案，它也不会注入HTML，但纯粹使用DOM方法：

var div = document.createElement('div');
div.setAttribute('class', 'inner');

var p = document.createElement('p');
p.appendChild(document.createTextNode('The 1st paragraph'));
div.appendChild(p);

p = document.createElement('p');
p.appendChild(document.createTextNode('The 2nd paragraph'));
div.appendChild(p);

var table = document.querySelector('table');
table.rows[0].cells[1].appendChild(div);

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

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

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

6 个答案: