Question

我正在尝试编辑设置表格中特定行的列值，但代码无效。

以下是我要做的事情：

＆＃13;

var td = document.createElement('td');
td.appendChild(document.createTextNode('hi'));
$('#tr').appendChild(td);

＆＃13;

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

＆＃13;

Answer 1

注意：只有在<table>内正确包装时，才有效。

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

＆＃13;

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

＆＃13;

如果您使用的是jQuery，则非常简单，但您需要将<tr>包裹在<table>内，以便显示<tr>。查看下面的工作代码：

＆＃13;

$(function () {
  var td = $("<td />", {
    html: "hi"
  });
  $("#tr").find("td").first().after(td);
});

＆＃13;

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

＆＃13;

Answer 2

将其追加到第二位：

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

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

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

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

2 个答案: