JS删除表格指定行

SimonX工作室 2011-06-08 10:53:30

题目要求：一个3*4表格，每行的第一列都有一个checkbox控件，要实现的功能是：随意选中某一行或几行，然后通过按钮删除或隐藏，按钮必须在表格的外面！

...全文

643 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

lh_fengyuzhe 2011-06-08

打赏
举报



<table id='aaa'>

<tr><td><input type='checkbox' name='delsid'>aaaaaaaaaaaaaa</td></tr>

<tr><td><input type='checkbox' name='delsid'>bbbbbbbbbbb</td></tr>

<tr><td><input type='checkbox' name='delsid'>ccccccccccccc</td></tr>

<tr><td><input type='checkbox' name='delsid'>dddddddddddd</td></tr>

</table>

<input type='button' onclick='doDel()' value='删除'/>

<script>

function doDel()

{

    var tab = document.getElementById('aaa');

    var checks = document.getElementsByName("delsid");

    for (var i=checks.length - 1; i >=0 ; i--)

    {

        if (checks[i].checked)

        {

            tab.deleteRow(i);

        }

    }

}

</script>

caibird1024 2011-06-08

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <script>

	function clr() {

		var el = document.getElementsByTagName('input');     

		var len = el.length;     

		for(var i=0; i<len; i++){         

			if((el[i].type=="checkbox")&& el[i].checked){             

				var tdNode = el[i].parentNode;

				var trNode = tdNode.parentNode;

				trNode.style.display='none';	

			}     

		} 

	} 

  

  </script>

 </HEAD>



 <BODY>

	<table>

		<tr><td><input type="checkbox" name='xx' /></td><td>1</td> </tr>

		<tr><td><input type="checkbox" name='xx' /></td><td>2</td> </tr>

		<tr><td><input type="checkbox" name='xx' /></td><td>3</td> </tr>

		<tr><td><input type="checkbox" name='xx' /></td><td>4</td> </tr>

	</table>

	<button onclick='clr()'>del</button>

 </BODY>

</HTML>

vivian 2011-06-08

打赏
举报

看这个行不？我也是在网上找的。
<html>
<head>
<script language="javascript">
var r=-1;
function addrow(){
r++;
var tbody = document.getElementById("tb");
var row = tbody.insertRow();

var innerHTML1 = "<input type='text' name='cusername' size='15' value=''>";
var innerHTML2 = "<input type='text' name='cpassword' size='15' value=''>";
var innerHTML3 = "<input type='button' name='cpassword2' value='删除' onclick='remove("+r+")'>";
row.insertCell(0).innerHTML = innerHTML1;
row.insertCell(1).innerHTML = innerHTML2;
row.insertCell(2).innerHTML = innerHTML3;
tbody.appendChild(row);
}

function remove(ind){
var tbody = document.getElementById("tb");
r--;
var oTr = tbody.childNodes[ind];
tbody.removeChild(oTr);
var trRows = tbody.childNodes;
for (var i = ind; i < trRows.length; i++){
var sibingTr = trRows[i];
if (sibingTr == null) {
continue;
}
var cells = sibingTr.childNodes;
for (var j = 0; j < cells.length; j++) {
var oldContent = cells[j].innerHTML;
if (j == 0) {
var replaceRegx = "(\d+)/g";
oldContent = oldContent.replace(replaceRegx, "" + (i + 1));
}
cells[j].innerHTML = ProcessStrIndex(oldContent, i);
}
}
}

function ProcessStrIndex(str, index){
var replaceRegx = /$\d+$/g;
str = str.replace(replaceRegx, "(" + index + ")");
replaceRegx = /\[\d+\]/g;
str = str.replace(replaceRegx, "[" + index + "]");
return str;
}
</script>
</head>

<body>
<table border = "1" width="55%">
<tbody id = "tb">
<thead><td colspan = "3">增加和删除table行</td></thead>
</tbody>
<tr align = "left">
<td align = "right" colspan="3"><input type="button" value="增加" onclick="addrow()"/></td>
</tr>
</table>
</body>
</html>