2

我正在尝试在单击按钮时在表格中创建文本框。我在按钮单击中编写了 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 相关的数据]

4

1 回答 1

4

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/

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

于 2012-10-05T04:58:32.467 回答