如何使用javascript删除html中的多行 [英] how to delete multiple rows in html using javascript
问题描述
我想通过选中复选框来删除多行.我可以删除我选择的一行.但是如果我选择了多个复选框，则当我按下Delete按钮时，第一个索引不会被删除，并且它下面的行会被删除.
I want to delete multiple rows by selecting checkbox.. how to do that. i can delete one row which i select. but if i select multiple checkbox means first index is not deleting and rows under it are getting deleted when i press delete button.
var temp=1;
function add()
{
var x=document.forms["data"]["ename"].value;
if(x==null || x=="")
{
alert("Enter your Name");
return false;
}
var y=document.forms["data"]["eid"].value;
if(y==null || y=="")
{
alert("Enter your ID no");
return false;
}
if(temp<10)
{
var x=document.getElementById('res').insertRow(temp);
var sno=x.insertCell(0)
var name=x.insertCell(1)
var id=x.insertCell(2)
sno.innerHTML="<input type='checkbox' id='cb' value="+ temp + ">";
name.innerHTML= document.forms["data"]["ename"].value;
id.innerHTML= document.forms["data"]["eid"].value;
temp++;
}
}
function delete1()
{
for(var i=0; i<document.data1.cb.length; i++){
if(document.data1.cb[i].checked)
{
document.getElementById('res').deleteRow(document.data1.cb[i].value);
}
}
}
<<blockquote class="FQ"><div class="FQA">Quote:</div>html>
<head>
<title> Database Of Employee </title>
<script type="text/javascript" src="task3.js"></script>
<link rel="stylesheet" type="text/css" href="task3.css" />
<head>
<body align="center">
<div class="main">
<form name="data" action="" method="" >
<table align="center" id="data">
<tr><td>Enter your name </td><td>: <input type="text" name="ename" size="25"></td><td> </td>
<td><input type="reset" value="Add" onclick="add()"></td><br /></tr>
<tr><td>Enter your ID </td><td>: <input type="text" name="eid" size="25"></td><td></td>
<td><input type="reset" value="Delete" onclick="delete1()"></td><br /></tr>
</table>
</form>
<hr>
<br />
<br /><br />
<div class="sub">
<form name="data1">
<table align="center" id="res" border="1" width="500" valign="top" >
<tr><th>S.No</th><th>NAME</th><th>ID</th></tr>
</table>
</form>
<br /><br /><br />
</div><!-- End of sub div-->
</div><!-- End of main div-->
</body>
</html</blockquote>>
推荐答案
函数delete1()
{
for(var j = temp-2; j> = 0; j--)
{
if(document.data1.cb [j] .checked)
{
document.getElementById("res").deleteRow(j + 1);
}
}
}
function delete1()
{
for(var j=temp-2; j >= 0; j--)
{
if(document.data1.cb[j].checked)
{
document.getElementById("res").deleteRow(j+1);
}
}
}
如果我们使用此方法，则意味着我们可以一次删除多行
if we use this method means we can delete multiple rows at a time
for(var i=0; i<document.data1.cb.length; i++){
if(document.data1.cb[i].checked)
{
document.getElementById('res').deleteRow(document.data1.cb[i].value);
}
}
document.data1.cb.length当您删除一行时此值将不同
说
您的总长度是10
现在，如果u删除第一行，则长度将为9，索引值将为1
因此for循环将不会执行10次
document.data1.cb.length this value will be different when u delete one row
say
your total length is 10
now if u delete 1st row then length will be 9 and index value will be 1
so for loop will not be executing 10 times
for(var i=0; i<document.data1.cb.length
; i++){
if(document.data1.cb[i].checked)
{
document.getElementById('res').deleteRow(document.data1.cb[i].value);
i=0;
}
}
这篇关于如何使用javascript删除html中的多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
