使用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

不要使用字符串形式的HTML（非常容易出错），而应该使用内置的DOM操作方法向表中添加新行。 确保您的表具有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);
}