我有一个带有插入和删除行功能的HTML表,它的工作非常完美。但删除功能适用于复选框+删除按钮。
当我想删除一行时,首先我选中了复选框,然后按删除按钮。我想直接使用删除按钮。以下是我的代码,
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)
{
if (rowCount <= 1)
{
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch(e)
{
alert(e);
}
getValues();
}
<a onclick="deleteRow('dataTable')">Delete Row</a>
<table id="dataTable">
<tr>
<td><input type="checkbox" name="chk"/></td>
<td><input type="text" name="Name"></td>
</tr>
</table>
注意:Atleast 1行应该在那里(不能删除所有行)
答案 0 :(得分:4)
如果要使用一个按钮,可用的解决方案是选择/取消选择要删除的行。这样也支持多选和删除。例如,
<强> JS
function selectRow(row) {
if (row.className.indexOf("selected") != -1) {
row.className = row.className.replace("selected", "");
} else {
row.className += " selected";
}
}
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)*/
if (row.getElementsByTagName("input")[0].className.indexOf("selected")!=-1) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
//getValues();
}
<强> HTML
<a onclick="deleteRow('dataTable')">Delete Row</a>
<table id="dataTable">
<tr>
<!-- <td><input type="checkbox" name="chk"/></td> -->
<td>
<input type="text" name="Name" onclick="selectRow(this)" />
</td>
</tr>
<tr>
<!-- <td><input type="checkbox" name="chk"/></td> -->
<td>
<input type="text" name="Name" onclick="selectRow(this)" />
</td>
</tr>
</table>
<强> CSS
input.selected {
border-color:lightgreen;
}
编辑 - 对评论的回复
如果您想为每一行设置一个删除按钮并使用它,您可以执行以下操作,
<强> HTML
<table id="dataTable">
<tr>
<!-- <td><input type="checkbox" name="chk"/></td> -->
<td>
<input type="text" name="Name" /><input type="button" value="delete" onclick="deleteRow('dataTable',this)" />
</td>
</tr>
<tr>
<!-- <td><input type="checkbox" name="chk"/></td> -->
<td>
<input type="text" name="Name" /><input type="button" value="delete" onclick="deleteRow('dataTable',this)" />
</td>
</tr>
</table>
<强> JS
function deleteRow(tableID,currentRow) {
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)*/
if (row==currentRow.parentNode.parentNode) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
//getValues();
}
答案 1 :(得分:0)
此代码是一个示例:
$(document).on('click', 'img.imgdel', function deleteRow() {
$(this).closest('tr').remove();
return false;
});