动态表格：给每行tr一个id,如何动态定位行并进行删除？

lgs6715 2003-02-18 11:15:51

table的id号----theTable
tr的id号-------"row"+number
--------------------------------------------
var number=1
function insert_Row(){
number=number+1
theRow=theTable.insertRow() //
thrRow.id="row"+|number
theRow.insertCell().innerHTML="....."
}

function dele_Row(theNumber){//行的标记编号担不同行号
document.removeChild(document.getElementById("row"+theNumber))//显示错误信息
}
该如何解决，请求教
...全文
401 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
利而不害 2003-02-18
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<input type="button" name="btn" value="添加一行" onClick="addrow()">
<table id="activeTable" style="border: #000000 solid 1px;" cellspacing="0" width="100%" cellpadding="0">
<caption>請 求 内 訳</caption>
<tr>
<td nowrap>請求月</td>
<td nowrap>計上月</td>
<td nowrap>請求件名</td>
<td nowrap>入金期限日</td>
<td nowrap>金額</td>
<td nowrap>消費税</td>
<td nowrap>備考</td>
<td nowrap>操作</td>
</tr>
<table>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
function addrow() {
var row = activeTable.insertRow(activeTable.rows.length);
var col = row.insertCell(0);
var i = row.rowIndex;
col.innerHTML = '<input name="seituki1" size="2"><input name="seituki2" size="2">';
col = row.insertCell(1);
col.innerHTML = '<input name="keituki1" size="2"><input name="keituki2" size="2">';
col = row.insertCell(2);
col.innerHTML = '<input name="kenmei" size="18" value="">';
col = row.insertCell(3);
col.innerHTML = '<input name="kigen" size="17">';
col = row.insertCell(4);
col.innerHTML = '<input name="kingaku1" size="15" style="text-align: right">';
col = row.insertCell(5);
col.innerHTML = '<input name="zei1" size="13" style="text-align: right">';
col = row.insertCell(6);
col.innerHTML = '<input name="bikou1" value="' + i + ' " size="15">';
col = row.insertCell(7);
col.innerHTML = '<button onClick="delrow()">删除本行</button>';
}

function delrow () {
var srcName = document.getElementsByTagName("button");
var rowIndex = 0;
for ( i=0;i<srcName.length;i++){
if(srcName[i]==event.srcElement)
rowIndex=i;
}
activeTable.deleteRow(rowIndex + 1);
}
</script>
sportdog 2003-02-18
  • 打赏
  • 举报
 回复
<table width="100%" border="1" id=otable>
<tr>
<td><div align="center">科研工作项目</div></td>
<td><div align="center">预期目标</div></td>
<td><div align="center">进度</div></td>
<td><div align="center">工作者</div></td>
<td></td>
</tr>
<tr>
<td><INPUT name=ItemSub size=10></td>
<td><INPUT name=ItemObject size=10></td>
<td><INPUT name=ItemSche size=10></td>
<td><INPUT name=Workman size=10></td>
</tr>
</table>
<input type=button name=b1 value=del onclick=del()>
<input type=button name=b1 value=add onclick=add()>

<script language=javascript>
<!--
function del()
{
otable.deleteRow(1);

}

function add()
{ var madd=otable.rows.length;
var orow1=otable.insertRow(otable.rows.length);
//insert one row.
var arows=otable.rows;
//retrieve the rows collection for the table
var acells=orow1.cells;
//retrieve the cells collection for the new row
var ocell1_1=arows(orow1.rowIndex).insertCell(acells.length);
var ocell1_2=arows(orow1.rowIndex).insertCell(acells.length);
var ocell1_3=arows(orow1.rowIndex).insertCell(acells.length);
var ocell1_4=arows(orow1.rowIndex).insertCell(acells.length);
ocell1_1.innerHTML="<INPUT name=ItemSub"+madd+" size=10>";
ocell1_2.innerHTML="<INPUT name=Itemobject"+madd+" size=10>";
ocell1_3.innerHTML="<INPUT name=ItemShce"+madd+" size=10>";
ocell1_4.innerHTML="<INPUT name=workman"+madd+" size=10>";
}

-->
</script>
keygao 2003-02-18
  • 打赏
  • 举报
 回复













<html>
<head>
<title>Apollowireless.com - Back Office </title>
<LINK href="/style/style_back.css" type="text/css" rel=stylesheet>
<script language="JavaScript">
<!--
function LogoConfirm(src){
var Lstatus=window.confirm(' Are you sure you want to sign out?');
if(Lstatus){
window.location="/jsp/back/account/logout.jsp";
}
}

function OverFunction( wol1, Alink ){
wol1.bgColor='#FFFFFF';
// wol2.bgColor='#000000';
Alink.className="Currentmenumain";
}

function OutFunction( wol1, Alink ){
wol1.bgColor='#0C1165';
//wol2.bgColor='#C4D0F6';
Alink.className="menu";
}
function OverFunctionMenu( wol1, Alink ){
wol1.bgColor='#ffcc00';
Alink.className="Currentmenumain";
}

function OutFunctionMenu( wol1, Alink ){
wol1.bgColor='#515CAE';
Alink.className="menu";
}

//-->
</script>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form method=post action="" name="thisForm">
<table width="780" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="760" border="0" cellspacing="0" cellpadding="2" align="center">

<script language="JavaScript">
<!--
function delItem(){
var line=parseInt(event.srcElement.ln);
if (line>0){
for (i=1;i<qtylist.rows.length;i++){
if (ttr[i].ln==line) {
if (confirm("Are you sure you want to delete this record?")){
qtylist.deleteRow(i);
return;
}
}
}
}
}
var allCount=1;
function newqtylist(){
var lastcunt=0;
var strHTML="Record "+allCount;
strHTML+="<input type=\"hidden\" name=\"STATUS"+allCount+"\" value=\"1\">\r\n";

newRow=qtylist.insertRow(qtylist.rows.length);
newRow.id="ttr";
newRow.ln=allCount;
newRow. bgColor="#EEEEEE";

c0=newRow.insertCell(0);
c0.ln=allCount;
c0.onclick=delItem;
c0.innerHTML="<input type=button value=\"del\" width=\"12\" ln=\""+allCount+"\" height=\"12\" border=0 alt=\"Remove Item\" style=\"cursor:hand;\">";

c1=newRow.insertCell(1);
c1.innerHTML=strHTML;
document.thisForm.proqty.value=allCount;
allCount++
}
//-->
</script>
<input type="hidden" name="proqty">
<tr>
<td>
<table width="400" cellspacing="1" cellpadding="2" border="0" bgcolor="#999999" id="qtylist" rules="rows" align=center>
<tr id="ttr" ln="0" bgColor=#eeeeee>
<td width="10" valign="top" ln="0"></td>
<td><input type="hidden" name="proqty" value="0">
Record 0
</td>
</tr>

</table>
<table align=center border=1 borderColorDark=white borderColorLight=gray cellpadding=2 cellspacing=1 width="400">
<tr>
<td align=center onclick="newqtylist()" class=controlPanel onmouseout="this.className='controlPanel'" onmouseover="this.className='controlPanelMouseOver'"><font style="font-size:14px;">Add a New Record, Click here</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</form>
</table>
</body>
</html>
wangxiaomax 2003-02-18
  • 打赏
  • 举报
 回复
http://expert.csdn.net/Expert/topic/1423/1423204.xml?temp=.2212183
jquery表格动态添加删除行代码.zip
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
动态创建删除表格
jquery动态实现创建、删除整个表格，一行一行创建、删除表格。一格一格创建、删除表格
利用jquery给指定的table动态添加一行、删除一行的方法
下面小编就为大家带来一篇利用jquery给指定的table动态添加一行、删除一行的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery操作表格增加删除
jquery操作表格增加删除
jquery对表格行增删操作
jquery对表格行操作，增删，只是多选删除。
JavaScript

87,996

社区成员

224,693

社区内容

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

加载中

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

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

+ 用AI写文章