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