當我使用Javascript單擊按鈕時，如何在表格中添加新行

Question

大家好，我的代碼有問題。每當我點擊添加產品時，我想添加具有相同字段的新行。但是，當我運行代碼並點擊添加產品時，它不起作用。

這裏的HTML：

<table class="table" id="concierge"> 
<th>Item Name</th> 
<th>Item Code</th> 
<th>Description</th> 
<th>Quantity</th> 
<th>Price</th> 
<th>Image</th> 
<tr> 
<td><input type="text" name="itemname" id="itemname" style="border: none"/></td> 
<td><input type="text" name="itemcode" id="itemcode" style="width:50%; border:none"/></td> 
<td><input type="text" name="description" id="description" style="border:none;"/></td> 
<td><input type="text" name="quantity" id="quantity" style="width:50%; border: none"/></td> 
<td><input type="text" name="price" id="price" style="width:50%; border: none"/></td> 
<td><input type="file" name="image" id="image" style="border:none"></td> 
<td><input type="checkbox" name="check" placeholder="Delete"></td> 
</tr> 
</table> 
<input type="button" name="add" value="Add Product" onclick="addRow(concierge)"/> 
<input type="button" name="delete" value="Delete Product" onclick="deleteRow(concierge)"/> 

和腳本我使用兩個刪除和添加：

function addRow(tableID) { 

    var table = document.getElementById(tableID); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var cell1 = row.insertCell(0); 
    var element1 = document.createElement("input"); 
    element1.type = "text"; 
    element1.name="itemname"; 
    cell1.appendChild(element1); 

    var cell2 = row.insertCell(1); 
    var element2 = document.createElement("input"); 
    element2.type = "text"; 
    element2.name = "itemcode"; 
    cell3.appendChild(element2); 

    var cell3 = row.insertCell(2); 
    var element3 = document.createElement("input"); 
    element3.type = "text"; 
    element3.name = "description"; 
    cell3.appendChild(element3); 

    var cell4 = row.insertCell(3); 
    var element4 = document.createElement("input"); 
    element4.type = "text"; 
    element4.name = "quantity"; 
    cell4.appendChild(element4); 

    var cell5 = row.insertCell(4); 
    var element5 = document.createElement("input"); 
    element5.type = "text"; 
    element5.name = "price"; 
    cell5.appendChild(element5); 

    var cell6 = row.insertCell(5); 
    var element6 = document.createElement("input"); 
    element6.type = "file"; 
    element6.name = "image"; 
    cell6.appendChild(element6); 

    var cell7 = row.insertCell(6); 
    var element7 = document.createElement("input"); 
    element7.type = "checkbox"; 
    element7.name = "check"; 


} 

function deleteRow(tableID) { 
    try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


     } 
    }catch(e) { 
     alert(e); 
    } 
} 

預先感謝您的幫助

Answer 1

禮賓應該是「禮賓「

and change cell3 to cell2 for element2

function addRow(tableID) { 
 

 
    var table = document.getElementById(tableID); 
 

 
    var rowCount = table.rows.length; 
 
    var row = table.insertRow(rowCount); 
 

 
    var cell1 = row.insertCell(0); 
 
    var element1 = document.createElement("input"); 
 
    element1.type = "text"; 
 
    element1.name="itemname"; 
 
    cell1.appendChild(element1); 
 

 
    var cell2 = row.insertCell(1); 
 
    var element2 = document.createElement("input"); 
 
    element2.type = "text"; 
 
    element2.name = "itemcode"; 
 
    cell2.appendChild(element2); 
 

 
    var cell3 = row.insertCell(2); 
 
    var element3 = document.createElement("input"); 
 
    element3.type = "text"; 
 
    element3.name = "description"; 
 
    cell3.appendChild(element3); 
 

 
    var cell4 = row.insertCell(3); 
 
    var element4 = document.createElement("input"); 
 
    element4.type = "text"; 
 
    element4.name = "quantity"; 
 
    cell4.appendChild(element4); 
 

 
    var cell5 = row.insertCell(4); 
 
    var element5 = document.createElement("input"); 
 
    element5.type = "text"; 
 
    element5.name = "price"; 
 
    cell5.appendChild(element5); 
 

 
    var cell6 = row.insertCell(5); 
 
    var element6 = document.createElement("input"); 
 
    element6.type = "file"; 
 
    element6.name = "image"; 
 
    cell6.appendChild(element6); 
 

 
    var cell7 = row.insertCell(6); 
 
    var element7 = document.createElement("input"); 
 
    element7.type = "checkbox"; 
 
    element7.name = "check"; 
 

 

 
} 
 

 
function deleteRow(tableID) { 
 
    try { 
 
     var table = document.getElementById(tableID); 
 
     var rowCount = table.rows.length; 
 

 
     for(var i=0; i<rowCount; i++) { 
 
      var row = table.rows[i]; 
 
      var chkbox = row.cells[0].childNodes[0]; 
 
      if(null != chkbox && true == chkbox.checked) { 
 
       table.deleteRow(i); 
 
       rowCount--; 
 
       i--; 
 
      } 
 

 

 
     } 
 
    }catch(e) { 
 
     alert(e); 
 
    } 
 
}

<table class="table" id="concierge"> 
 
<th>Item Name</th> 
 
<th>Item Code</th> 
 
<th>Description</th> 
 
<th>Quantity</th> 
 
<th>Price</th> 
 
<th>Image</th> 
 
<tr> 
 
<td><input type="text" name="itemname" id="itemname" style="border: none"/></td> 
 
<td><input type="text" name="itemcode" id="itemcode" style="width:50%; border:none"/></td> 
 
<td><input type="text" name="description" id="description" style="border:none;"/></td> 
 
<td><input type="text" name="quantity" id="quantity" style="width:50%; border: none"/></td> 
 
<td><input type="text" name="price" id="price" style="width:50%; border: none"/></td> 
 
<td><input type="file" name="image" id="image" style="border:none"></td> 
 
<td><input type="checkbox" name="check" placeholder="Delete"></td> 
 
</tr> 
 
</table> 
 
<input type="button" name="add" value="Add Product" onclick="addRow('concierge')"/> 
 
<input type="button" name="delete" value="Delete Product" onclick="deleteRow('concierge')"/>