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);
}

使用JavaScript轻松设置字段值

1 个答案: