用javascript动态在table里增加tr
 悬赏分:10 - 解决时间:2008-5-22 10:41
用javascript每触发一个事件
在一个table里增加一个tr,tr里包括多个td。也是动态增加
提问者: geniuschess - 助理 二级 最佳答案
<script language="javascript">
var table = document.getElementById("table_id");
var tr = table.insertRow();
for(var i=0; i<4; i++){
var td = tr.insertCell(i);
td.innerText = i;
}

</script>

<table border=1 id="table_id">
</table>

----------------------------------------------------------------


给你做了个示例,table动态增加和删除行。

<body>
<input type="button" value="Add Row" onclick="addRow()">
<table border='1' id="t" >
</table>
</body>

<script language="JavaScript">
var t = document.getElementById("t");
function addRow(){
var tr = t.insertRow();
var td = tr.insertCell();
td.innerText = t.rows.length;
td = tr.insertCell();
td.innerHTML = "<input type='button' value='Delete' onclick='deleteRow(this)'>";
}

function deleteRow(btn){
var tr = btn.parentNode.parentNode;
t.deleteRow(tr.rowIndex);
}
</script>

-------------------------------------------------
关于javascript自动增删表格行的问题
 悬赏分:100 - 解决时间:2008-6-12 09:18
利用javascript函数在指定表格增加行,且每行有删除按钮供删除该行。
表格代码如下:
<tr>
<td class="STYLE6"><span class="STYLE6">已设定复合字段:</span></td>
<td><table width="80%" border="1" cellpadding="8" cellspacing="1" id="complexselectedlist" name="complexselectedlist">
<tr>
<th width="33%" scope="col">符合字段名 </th>
<th width="33%" scope="col">选中字段 </th>
<th width="34%" scope="col">功能键</th>
</tr>
</table></td>
</tr>

javascript代码如下:

var i=1;
function insert_row()
{
++i;
if(local.complexlist.value.length != 0)
{

R=complexselectedlist.insertRow();
C=R.insertCell();
C.innerHTML="<input type=\"text\" name=\"complexcolnewname\" disabled=\"disabled\" size=\"30\" value=\""+local.complexcolname.value+"\">";
C=R.insertCell();
C.innerHTML="<input type=\"text\" name=\"complexcols\" disabled=\"disabled\" size=\"30\" value=\""+local.complexlist.value+"\">";
C=R.insertCell();
C.innerHTML="<input type=\"button\" value=\"删除\" onclick=\"complexselectedlist.deleteRow("+i+")\">";
}
}


现在的问题是:
i的值从10开始算起,且添加多行后,只能从最后一行逐一向上删除才可删除全部表格行,删除后再增加,i的值不能回到起始状态,而是继续累加。


希望达到的效果:
可以增加表格行,删除时点击相应行的删除键删除相应行,

posted on 2008-09-01 13:16  sky100  阅读(998)  评论(0编辑  收藏  举报