我试图删除按钮来删除行或使用chkbox和按钮删除行。当我使用deleteRow函数时,它将删除表中的所有行。另外,我已经分配了一个元素id来做其他函数,所以我不能改变关于赋值元素id的addrow函数 当我使用删除按钮,它可以做我想要的。我想在选中复选框时删除该行如何使用复选框删除行? 这是我的代码:
HTML:
<form>
<table>
<tr>
<td align="center" colspan="3"></td>
</tr>
</table>
<table id="dataTable" class='table table-striped table-hover table-bordered'>
<tr>
<td align="center"><b>Product ID:</b></td>
<td><input type="text" name="productid" id="productid" class="form-control" /></td>
<td align="center"><b>QTY:</b></td>
<td><input type="text" name="poqty" id="poqty" class="form- control"></td>
</tr>
<tr>
<input type="button" value="Add Item" onclick="addRow('dataTable')" class="form-control" />
<input type="button" value="del Item" onclick="deleteRow('dataTable')" class="btn btn-default" />
</tr>
<tr>
<td>
<input type="submit" value="confirm">
</td>
</tr>
<div id="txtHint"></div>
<div id="qty123"></div>
</td>
</tr>
</table>
</form>
使用Javascript:
<script language="javascript">
var y = 0;
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 = "checkbox";
element1.name = "chkbox";
element1.id = "chkone" + y;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox1[]";
element2.id = "txtone" + y;
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox2[]";
element3.id = "txtre" + y;
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox3[]";
element4.id = "qtyone" + y;
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox4[]";
element5.id = "txtra" + y;
cell5.appendChild(element5);
y++;
}
</script>
<script>
function deleteRow(dataTable) {
var table = document.getElementById(dataTable);
var row = document.getElementById(dataTable);
row.parentNode.removeChild(row);
}
</script>
我想在选中复选框时删除该行,如何使用复选框删除行?
答案 0 :(得分:0)
这里可能存在不止一个问题,但对我来说有什么问题:
<input type="button" value="Add Item" onclick="addRow(tableID)" class="form-control" />
您正好将tableID
传递给此函数,而您正确地将参数传递给deleteRow()函数。您的代码中的tableID
在哪里?
鉴于您发布的代码,调用addRow()时没有任何反应,因为函数永远不会被触发 - tableID
未定义。