javascript - 使用 JavaScript 轻松设置字段值

Question

不太确定如何提出这个问题，但我的情况是这样的......我有一个一行的表格，其中包含一些输入框。当用户按下add new时，我已设法在表中添加另一行。首先，我创建一个名为 oldtable 的新变量，然后将其拆分为每个 <tr> ..并将其保存到数组 rows 。我使用这段代码:

var newdata="";
  for(i=0;i<rows.length;i++)
  {
   // adds the next row on...
   newdata=newdata+rows[i]+"<tr>";
  }

  newdata=newdata+"MY NEW ROW GOES HERE!";

然后我继续重置表格 innerHTML到newdata变量。

一切正常，直到用户在第一行输入数据，然后在第二行添加数据。那么第一行的值就消失了，这是可以理解的。考虑到理论上该表可以包含用户想要的任意多行，我该如何保持第一行的值不变？有没有办法将数据插入表中而不重置其中的内容？

谢谢。

var olddata = document.getElementById("products_table").innerHTML;

// This splits up each row of it
var rows = olddata.split("<tr>");

// Makes a variable where the new data is going to be stored
var newdata = "";

// This loop is to add back the existing html into the table, it is one short, because we Omit the "add new product" row.
for(i=0;i<rows.length-1;i++)
{
  // adds the next row on...
  newdata=newdata+rows[i]+"<tr>";
}

// Adds the additional html needed to 
newdata=newdata+"my new row goes here!";

// Add newly edited table back in...
document.getElementById("products_table").innerHTML=newdata;

Answer 1

您应该使用内置的 DOM 操作方法向表中添加新行，而不是以字符串形式操作 HTML(非常容易出错)。确保您的表格具有 TBODY 元素并为其指定 ID:

<table id = "product_table">
 <tbody id = "product_table_tbody">
  <tr>
   <td>A Cell</td>
  </tr>
 </tbody>
</table>

然后，将事件处理程序附加到“添加行”按钮并执行如下操作:

function addRow() {
   var myTbody = document.getElementById("products_table_tbody");
   var myRow = document.createElement("tr");
   var myCell = document.createElement("td");

   myCell.innerHTML = "My new cell";
   myTbody.appendChild(myRow);
   myRow.appendChild(myCell);
}