JS删除表格指定行

SimonX工作室 2011-06-08 10:53:30
题目要求:一个3*4表格,每行的第一列都有一个checkbox控件,要实现的功能是:随意选中某一行或几行,然后通过按钮删除或隐藏,按钮必须在表格的外面!
...全文
642 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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>
devin_jia 2011-06-08
  • 打赏
  • 举报
回复
<tr class="hello">Hello</tr>
$("tr").detach(".hello");
把带有hello类的行删除
SimonX工作室 2011-06-08
  • 打赏
  • 举报
回复
希望高手解决,小弟感激!很急……
SimonX工作室 2011-06-08
  • 打赏
  • 举报
回复
小弟谢谢各位指点!

51,397

社区成员

发帖
与我相关
我的任务
社区描述
Java相关技术讨论
javaspring bootspring cloud 技术论坛(原bbs)
社区管理员
  • Java相关社区
  • 小虚竹
  • 谙忆
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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