弱弱地问下,如何删除选中的行

Smhily 2009-10-12 09:33:48
这是一个增加行,和删除行的代码,我做了稍微的改动...
现在我想删除选中框的行...但是遇到了麻烦...请大虾指点...谢谢...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<title>无标题文档</title>
<style type="text/css">
body{background:#FFFFFF;}
</style>
<script type="text/javascript">
var i =0;
function add(){
var oTr = document.getElementById("addtr").rows[1];
var newTr = oTr.cloneNode(true);
document.getElementById("addtr").getElementsByTagName("tbody")[0].appendChild(newTr);
}

function deleteline(){
i = document.all("addtr").rows.length;
while(i >2){
//if(document.all("addtr").getElementsByID("del").checked==true){ //这里要如何书写的好呢?我试了好久都不可以...谢谢...
document.all("addtr").deleteRow(i-1);
//}
i--;
}
}

</script>
</head>
<body>
<input type="button" id="b1" value="Add Line" onclick="add()" />
<input type="button" id="b2" value="Delete Line" onclick="deleteline()" />
<table width="700" border="0" cellspacing="0" cellpadding="0" id="addtr">
<tr>
<td align="center" bgcolor="#CCCCCC">AA </td>
<td align="center" bgcolor="#CCCCCC">BB</td>
<td align="center" bgcolor="#CCCCCC">CC</td>
<td align="center" bgcolor="#CCCCCC">DD</td>
<td align="center" bgcolor="#CCCCCC">EE</td>
<td align="center" bgcolor="#CCCCCC">FF</td>
<td align="center" bgcolor="#CCCCCC">GG</td>
<td align="center" bgcolor="#CCCCCC">HH</td>
<td align="center" bgcolor="#CCCCCC">DEL</td>
</tr>
<tr>
<td align="center"><input size="10" type="text" name="a" /></td>
<td align="center"><input size="10" type="text" name="b" /></td>
<td align="center" height="20">
<select name="c" >
<option value="-1" selected="selected">Please select</option></select></td>
<td align="center"><input size="10" type="text" name="c" /></td>
<td align="center"><input type="checkbox" name="d"/></td>
<td align="center"><input type="checkbox" name="e"/></td>
<td align="center"><input size="10" type="text" name="f" /></td>
<td align="center"><input size="10" type="text" name="g" /></td>
<td align="center"><input type="checkbox" name="del" id="del"/></td>
//就是在这里,如果我勾选了它,就是要删除的
</tr>
</table>
</body>
</html>
...全文
111 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
swandragon 2009-10-12
  • 打赏
  • 举报
 回复
改了一下可以删除第一行了
但不是真正的删除，是不显示


<script type="text/javascript">

function add(){

	var oTable = document.getElementById("addtr");

	var oTr = document.getElementById("addtr").rows[1];

	if(oTable.rows.length == 2 && oTr.style.display == "none"){

		oTr.style.display = "";

	}else {

		var newTr = oTr.cloneNode(true);

		document.getElementById("addtr").getElementsByTagName("tbody")[0].appendChild(newTr);

	}	

}



function deleteline(){

    var oTable = document.getElementById("addtr");

    var checkedTr = document.getElementsByName("del");

	var delIndex = "";

	for(var i = 0; i< checkedTr.length ; i++){

		if(checkedTr[i].checked){

		    delIndex += i+1+",";

		}

	}

	var delTrs = delIndex.split(",");

	var num = 0;

	for(var t = 0 ; t< delTrs.length -1 ;t++){

	   if(oTable.rows.length == 2){

		  checkedTr[0].checked = false;

	      oTable.rows[1].style.display = "none";

		  break;

	   }

	   if(delTrs[t] != ""){

			oTable.deleteRow(parseInt(delTrs[t])-num++);

	   }

	}

}

</script>
swandragon 2009-10-12
  • 打赏
  • 举报
 回复
能实现选择删除功能，但不能删除最后一行，否则添加不了
LZ自己改改吧


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档 </title>

<style type="text/css">

body{background:#FFFFFF;}

</style>

<script type="text/javascript">

var i =0;

function add(){

var oTr = document.getElementById("addtr").rows[1];

var newTr = oTr.cloneNode(true);

document.getElementById("addtr").getElementsByTagName("tbody")[0].appendChild(newTr);

}



function deleteline(){

    var oTable = document.getElementById("addtr");

    var checkedTr = document.getElementsByName("del");

	var delIndex = "";

	for(var i = 0; i< checkedTr.length ; i++){

		if(checkedTr[i].checked){

		    delIndex += i+1+",";

		}

	}

	var delTrs = delIndex.split(",");

	var num = 0;

	for(var t = 0 ; t< delTrs.length -1 ;t++){

	   if(oTable.rows.length == 2){

		  alert("can not delete last row ");

		  break;

	   }

	   if(delTrs[t] != ""){

			oTable.deleteRow(parseInt(delTrs[t])-num++);

	   }

	}

}



</script>

</head>

<body>

<input type="button" id="b1" value="Add Line" onclick="add()" />

<input type="button" id="b2" value="Delete Line" onclick="deleteline()" />

<table width="700" border="0" cellspacing="0" cellpadding="0" id="addtr">

  <tr id="trId">

    <td align="center" bgcolor="#CCCCCC">AA </td>

    <td align="center" bgcolor="#CCCCCC">BB </td>

    <td align="center" bgcolor="#CCCCCC">CC </td>

    <td align="center" bgcolor="#CCCCCC">DD </td>

    <td align="center" bgcolor="#CCCCCC">EE </td>

    <td align="center" bgcolor="#CCCCCC">FF </td>

    <td align="center" bgcolor="#CCCCCC">GG </td>

    <td align="center" bgcolor="#CCCCCC">HH </td>

    <td align="center" bgcolor="#CCCCCC">DEL </td>

  </tr>

  <tr>

    <td align="center"> <input size="10" type="text" name="a" /> </td>

    <td align="center"> <input size="10" type="text" name="b"  /> </td>

    <td align="center" height="20">

     <select name="c" >

     <option value="-1" selected="selected">Please select </option> </select> </td>

    <td align="center"> <input size="10" type="text" name="c" /> </td>

    <td align="center"> <input type="checkbox" name="d"/> </td>

    <td align="center"> <input type="checkbox" name="e"/> </td>

    <td align="center"> <input size="10" type="text" name="f" /> </td>

    <td align="center"> <input size="10" type="text" name="g" /> </td>

    <td align="center"> <input type="checkbox" name="del" id="del"/> </td> 

  </tr>

</table>

</body>

</html>

rosewj 2009-10-12
  • 打赏
  • 举报
 回复
还有这样全部删除好像不可以。。你要自己控制一下。。删除了以后就会有js错误了
rosewj 2009-10-12
  • 打赏
  • 举报
 回复 
function deleteline(){ 

  

 



 



	

	for(var i=document.getElementsByName("del").length-1;i>=0;i--) {

			if(document.getElementsByName("del")[i].checked==true){ //这里要如何书写的好呢?我试了好久都不可以...谢谢... 

					//alert(document.getElementsByName("del")[i].parentNode.parentNode.rowIndex);

					document.all("addtr").deleteRow(document.getElementsByName("del")[i].parentNode.parentNode.rowIndex); 



			} 

	}





}


这样可以实现，lz要注意只能从最下面开始删起 因为从最上面的话rowindex会一直在变的。。
轻松工作快乐生活 2009-10-12
  • 打赏
  • 举报
 回复
取checkbox的父节点的父节点。然后删除就行了。
Smhily 2009-10-12
  • 打赏
  • 举报
 回复
非常感谢...
FTP.rar_弱口令
检测FTP弱口令，注意要用的时候一定要选中兼容模式。不然可能造成无法运行
Notepad++选中行操作 快捷键 使用技巧
Notepad++选中行操作 快捷键 使用技巧 用Notepad++写代码，要是有一些重复的代码想copy一下，还真不容易，又得动用鼠标，巨烦人。。。。 有木有简单的方法呢，确实还是有的不过也不算太好用。 主要是应用键盘上的 Home 键 和 End 键。 鼠标光标停留在一行的某处，按 Home 键光标会跳到行首，按End键光标会跳到行尾。 鼠标光标停留在行尾，按 Shift + Home 选中一行。 鼠标光标停留在行首，按 Shift + End 选中一行。 鼠标光标停留在类中某处，按 Shift +
uni-app 之组件 入门教程 uniapp在线教程 uni app视频教程
讲解uni-app中如何使用组件，主要讲解了基础组件，表单组件等常用的组件，课程主要是针对uni app组件入门学习者。
intelliJ IDEA 多行选中相同内容快捷键
Mac下： 选中下一个相同的内容：ctrl + G 选中文件中所有相同个的内容：command + ctrl + G   G在这里可以代表Good Thing，你从文件的这么多内容中选中它，代表它是个佼佼者（Goood thing）。 ctrl 和command在mac中都是“控制”，但ctrl的地位比较低，ctrl +G 意思是对好东西的比较弱的控制，也就是选择其中几个出来。comma...
Clion 多行选中相同内容快捷键
Mac下： 选中下一个相同的内容：ctrl + G 选中文件中所有相同的内容：command + ctrl + G G在这里可以代表Good Thing，你从文件的这么多内容中选中它，代表它是个佼佼者（Goood thing）。 ctrl 和command在mac中都是“控制”，但ctrl的地位比较低，ctrl +G 意思是对好东西的比较弱的控制，也就是选择其中几个出来。command + ctr...
Web 开发

81,094

社区成员

341,711

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章