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