javascript - 两个表添加新行按钮 - 冲突

Question

我有两个表，每个表都有不同的 ID。我在每个表格下方都有一个按钮，用于添加一行(或者我希望它发生)。当我只有一个按钮可以单击时，它可以工作，但是当我引入另一个按钮时，两个表上的按钮都不再工作，所以我猜测两者之间存在冲突。以下是表格:

表1

<table id='addTable' class='tableclass' width='655' border='1'>
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
</table>
<button type='button' onclick='displayResult()'>Add New Row</button>

表2

<table id='editTable' class='tableclass' width='655' border='1'>
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
</table>
<button type='button' onclick='displayResultEdit()'>Add New Row</button>

JavaScript:

function displayResult()
{
var table=document.getElementById("addTable");
var row=table.insertRow(2);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML="Additional row to column one on the Add table";
cell2.innerHTML="Additional row to column two on the Add table";
}


function displayResultEdit()
{
var table=document.getElementById("editTable");
var row=table.insertRow(2);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML="Additional row to column one on the Edit table";
cell2.innerHTML="Additional row to column two on the Edit table";
}

这保存在 .js 文件中并在表格下方调用。正如我所说，如果只有一个表(以及顶部的 JavaScript 集)存在，表行就会被添加，但是当我引入另一个表时，当您单击按钮时，什么也不会发生。

希望能帮到你..

Answer 1

如果您修复 insertRow 中的索引错误，则两者都可以正常工作:

var row=table.insertRow(2);

2 是无效索引，因为表中当前只有 1 行，且索引为 0。我不明白它是如何运作的。这应该是:

var row=table.insertRow(1);

http://jsfiddle.net/5Fdwk/