使用javascript删除表行
我有一个带有插入和删除行功能的HTML表，它工作得非常好。但删除功能与复选框+删除按钮一起使用 当我想删除一行时，首先选中复选框，然后按delete按钮。我想直接用删除按钮。下面是我的代码使用javascript删除表行,javascript,html,Javascript,Html,我有一个带有插入和删除行功能的HTML表，它工作得非常好。但删除功能与复选框+删除按钮一起使用 当我想删除一行时，首先选中复选框，然后按delete按钮。我想直接用删除按钮。下面是我的代码 function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<
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>
函数deleteRow（tableID）
{
尝试
{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
对于（var i=0；i如果您想使用一个按钮，一个可用的解决方案是在单击时选择/取消选择要删除的行。这种方式还支持多选和删除。例如
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();
}
input.selected {
border-color:lightgreen;
}
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();
}
编辑-回复评论
如果您想为每一行设置一个删除按钮并使用该按钮，您可以执行以下操作：
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>
<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 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();
}
input.selected {
border-color:lightgreen;
}
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();
}
函数deleteRow（tableID，currentRow）{
试一试{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
对于（变量i=0；ifunction 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();
}
input.selected {
border-color:lightgreen;
}
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();
}
编辑-回复评论
如果您想为每一行设置一个删除按钮并使用该按钮，您可以执行以下操作：
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>
<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 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();
}
input.selected {
border-color:lightgreen;
}
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();
}
函数deleteRow（tableID，currentRow）{
试一试{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
对于（变量i=0；i $(document).on('click', 'img.imgdel', function deleteRow() {
$(this).closest('tr').remove();
return false;
});
此代码就是一个示例：
$(document).on('click', 'img.imgdel', function deleteRow() {
$(this).closest('tr').remove();
return false;
});
删除按钮具体在哪里？您是否在表格下方有一个按钮，并且要删除重点行？还是在每行之外有一个删除按钮？@melc ohhh抱歉，我忘记添加删除按钮，我更新了我的问题，现在检查它如果您仅使用删除按钮，您打算如何识别哪一行是否应该删除？@DavidThomas是的，我对每一行直接使用了“删除”按钮，但它会删除所有行。我想如果我们对该按钮使用一个特定的ID，但我不知道如何操作，为什么你要使这件事复杂化？请使用复选框，这是人们熟悉的用户界面，远没有猜测哪一行复杂使用id
可以识别特定的行，是的。但是在第二次或第三次单击时会发生什么？删除按钮到底在哪里？表下面有一个按钮，您想删除重点行吗？还是每行旁边有一个删除按钮？@melc ohhh抱歉，我忘记添加删除按钮，我更新了我的问题，现在检查它如果您仅使用删除按钮，您计划如何识别哪一行是否应该删除？@DavidThomas是的，我对每一行直接使用了“删除”按钮，但它会删除所有行。我想如果我们对该按钮使用一个特定的ID，但我不知道如何操作，为什么你要使这件事复杂化？请使用复选框，这是人们熟悉的用户界面，远没有猜测哪一行复杂您将被执行。并且使用id
将识别特定的行，是的。但是在第二次或第三次单击时会发生什么？非常感谢。这很好，但是使用自己的delete不可能删除该行吗button@sHAmsuLaRiFeEn不客气！我用第二个例子更新了答案。你很好：）现在这就是我要找的。非常感谢百万分之一的人。很好，但是用他们自己的delete来删除行难道不可能吗button@sHAmsuLaRiFeEn不客气！我用第二个例子更新了答案。你很好：）这就是我要找的。感谢百万分之一的读者提供这段代码片段，它可能会提供一些有限的、即时的帮助。一个适当的解释将极大地提高它的长期价值，说明为什么这是一个很好的问题解决方案，并使它对未来有其他类似问题的读者更有用。请编辑您的回答添加一些解释，包括您所做的假设。这是jQuery，不是JavaScript。问题没有指定jQuery，2021年我不推荐jQuery。此外，closeest（）和remove（）是现在是本机JavaScript函数，因此可以很容易地将其编写为纯JavaScript感谢您提供的代码片段，它可能会提供一些有限的、即时的帮助。正确的解释将极大地提高其长期价值，说明为什么这是一个很好的问题解决方案，并使其对未来使用o还有，类似的问题。请编辑您的答案，添加一些解释，包括您所做的假设。这是jQuery，不是JavaScript。问题没有指定jQuery，2021年我不建议使用jQuery。此外，closeest（）和remove（）现在是本机JavaScript函数，因此可以很容易地将其编写为纯JavaScript