大家好,我的代码有问题。每当我点击添加产品时,我想添加一个具有相同字段的新行。但是,当我运行代码并单击添加产品时,它不起作用。
这是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);
}
}
提前感谢您的帮助
答案 0 :(得分:1)
并将element3的cell3更改为cell2
<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')"/>
{{1}}