javascript - 添加的元素可防止代码向表中添加新行

Question

由于其中有另一个标签，我在将行添加到 div 标签中的表时遇到了一些问题。

我知道如果我可以更改表的 id 会很好，但是因为它是生成的，所以我无法更改它们。我只能更改包含表格的 div 的 ID。

<!--Adding does not work on this table -->
<h3>Wednesday</h3>
<button type="button" onclick="displayResult('wed')">Insert new row</button>
<div id="wed">
<strong>Even this stops it from adding</strong> <!--This is the problem -->
<table id="myTable" border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</table>
<div>   

<!--Adding works on this table -->
<h3>Thursday</h3>
<button type="button" onclick="displayResult('thu')">Insert new row</button>
<div id="thu">
<table id="myTable" border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</table>
<div>   

function displayResult(number) {
    var elemList=document.getElementById(number).childNodes;
    var table=elemList[1];
    var row=table.insertRow(-1);
    var cell1=row.insertCell(0);
    var cell2=row.insertCell(1);
    cell1.innerHTML="New";
    cell2.innerHTML="New";
}

这是 jsFiddle 说明我遇到的问题

Answer 1

我会假设通过索引获取元素是问题所在（没有看到生成表格的代码，很难确定），并建议一旦你有了 div，你getElementsByTagName('table')[0]看看你是否可以'从那里开始工作。

我还建议您使用 jquery 做的大部分事情都容易得多，如果您有能力将其添加到项目中，我会推荐它。