javascript - 带有javascript的asp中的动态文本框

Question

我正在尝试在单击按钮时在表格中创建文本框。我已经在按钮点击中编写了 javascript 代码并且它有效。我的问题是，在添加下一行文本框时，上一行文本框中输入的数据被清除。给出了代码和屏幕截图。请帮忙解决这个问题。

function addRow(tableID) {
   var table = document.getElementById(tableID);
   var count = table.rows.length - 1;
   table.innerHTML += "<tr> <td>"+count+"</td> <td><input type='text' id='date" + count + "' size='20'></td> <td><input type='text' id='from" + count + "' size='20'></td> <td><input type='text' id='to" + count + "' size='20'></td> <td><input type='text' id='mode" + count + "' size='20'></td> </tr>";
}

单击添加按钮时，我丢失了对应于 Sl.no1 的数据]

Answer 1

innerHTML 不适合您的场景。您确实应该使用 Javascript 提供的 insertRow 和 insertCell 方法。它是否更清洁、可维护且更易于阅读。 innerHTML 覆盖元素的内容，这是你的问题。如果您使用了 .innerHTML += "something" 那么它可能会起作用，但是您无法在每次调用 addRow 时都构建您的表格 - 您只需在字面上附加一个通过 HTML 新行。

https://developer.mozilla.org/en-US/docs/DOM/table.insertRow

https://developer.mozilla.org/en-US/docs/DOM/tableRow.insertCell

这样，您不必在每次调用函数 addRow 时都完全构建表格。您可以只使用 insertRow 并在其中附加一个带有文本框的新行。您以前的行不会被覆盖、重新创建或完全困惑(只要您做对了)。虽然链接中有示例，但我会在几分钟后发布一个包含您的代码的示例。

更新:

http://jsfiddle.net/MJ2md/

为了证明我的意思。它可能不是最干净的，我只是想快点写出来!