动态添加表格行

3

我正在尝试通过 JavaScript 动态地向一个 <table> 中添加两个 <td><tr>,但是我的代码好像没有起作用,有谁能看出问题在哪里吗?

Fiddle: https://jsfiddle.net/otL69Lpo/2/

HTML:

<button type="button" onclick="myFunction()">Click Me!</button>

<table class="table table-bordered" id="chatHistoryTable">
  <tr>
    <td>
      12:30:30
    </td>
    <td>
      text here
    </td>
</table>

JS:

function myFunction() {
  var table = document.getElementById("chatHistoryTable");

  var tr = document.createElement("tr");
  var td = document.createElement("td");
  var td2 = document.createElement("td");
  var txt = document.createTextNode("TIMESTAMP");
  var txt2 = document.createTextNode("user: text");

  td.appendChild(txt);
  td2.appendChild(txt2);
  tr.appendChild(td);
  tr.appendChild(td2);
  table.appendChild(tr);
}

输出应该是这样的:
| TIMESTAMP | user: text |

我在jsfiddle中将js加载类型更改为body,现在它可以正常工作了。 https://jsfiddle.net/otL69Lpo/3/ - brk
1个回答

2
这是jsFiddle中的常见问题。有几个选项可以加载JS,您需要将加载更改为以下之一:
  • 不包裹 - 在<head>中
  • 不包裹 - 在<body>中

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接