Wie füge ich eine neue Zeile in einer Tabelle hinzu, wenn ich auf eine Schaltfläche klicke, die Javascript verwendet

Question

Hallo, ich habe ein Problem mit meinem Code. Ich möchte eine neue Zeile mit den gleichen Feldern hinzufügen, wenn ich auf Produkt hinzufügen klicke. Wenn ich jedoch den Code ausführe und auf Produkt hinzufügen klicke, funktioniert es nicht.

Hier ist der 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)"/> 

und das Script ich bin mit beiden Löschen und Hinzufügen:

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

Sie für Ihre Hilfe Vielen Dank im Voraus sollte

Answer 1

Concierge sein „Concierge "

und ändern Sie Zelle3 in Zelle2 für 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')"/>