无法动态设置表的 td 元素的值

Not able to set the value for td element of table dynamically

本文关键字：td 元素 动态 设置      更新时间：2023-09-26

我正在尝试编辑设置表中特定行中列的值，但代码不起作用。

这是我正在尝试做的：

var td = document.createElement('td');
td.appendChild(document.createTextNode('hi'));
$('#tr').appendChild(td);
<tr id="tr">
  <td >
    Row 3
  </td>
  <!--- In the middle of these 2 row, i want that column that says "hi"-->
  <td>
    Row 3
  </td>
</tr>

将其附加到第二个位置：

 $('#tr td').first().after(td);

将原生JavaScript与jquery混合有什么意义？我会这样做： 

var td = $('<td>').text('hi');
$('#tr td').first().after(td);

注意：只有当您将其正确包装在<table>内时，这才有效。

我不认为$是定义的。因此，您可能需要使用td。

<table>
  <tr id="tr">
    <td >
      Row 3
    </td>
    <!--- In the middle of these 2 row, i want that column that says "hi"-->
    <td>
      Row 3
    </td>
  </tr>
</table>
<script>
  var td = document.createElement('td');
  td.appendChild(document.createTextNode('hi'));
  var el = document.getElementById("tr").getElementsByTagName("td");
  el[0].insertAdjacentHTML('afterend', '<td>' + td.innerHTML + '</td>');
</script>

如果你使用的是jQuery，它非常简单，但是你需要将<tr>包装在<table>中才能显示<tr>。检查下面的工作片段：

$(function () {
  var td = $("<td />", {
    html: "hi"
  });
  $("#tr").find("td").first().after(td);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="tr">
    <td >
      Row 3
    </td>
    <!--- In the middle of these 2 row, i want that column that says "hi"-->
    <td>
      Row 3
    </td>
  </tr>
</table>

相关文章：