动态添加行
<button onClick="add()">add</button>
<button onClick="del()">del</button>
<button onClick="test()">test</button>
<table id="t1" border="1"></table>
<script language="JavaScript">
function add(){
t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+t1.rows.length+'">';
}
function del(){
var c = document.getElementsByName('tt');
for(var i=0; i<c.length; i++)
if(c[i].checked)
t1.deleteRow(i);
}
function test(){
for(i=0;i<t1.rows.length;i++) alert(t1.rows[i].cells[0].innerHTML);
}
</SCRIPT>
点table1加入到table2中的例子
<table id=tab1 border=0 cellspacing=1 class=tab bgcolor=#CCCCCC width=300 align=left>
<tr bgcolor=yellow><td>名称</td><td>值</td></tr>
<script>
for(i=0;i<20;i++)
{document.write('<tr bgcolor=white onclick=add(this) onmouseout=this.bgColor="white" onmouseover=this.bgColor="#efffff"><td>第'+i+'行</td><td>第'+i+'列</td></tr></tr>')}
</script>
</table>
<table id=tab2 border=0 cellspacing=1 width=300 bgcolor=gray>
<tr bgcolor=redyellow id=tr1><td>名称</td><td>值</td></tr>
</table>
<script>
function add(obj)
{
//tab1.setExpression
tr=tab2.insertRow()
for(i=0;i<obj.cells.length;i++)
{
tr.style.backgroundColor="white"
tr.onmouseout=function(){this.bgColor="white"}
tr.onmouseover=function(){this.bgColor="#efffff"}
tr.onclick=function(){add2(this)}
tr.insertCell(i).innerHTML=obj.cells(i).innerHTML
}
tab1.deleteRow(obj.rowIndex)
}
function add2(o)
{
//tab1.setExpression
tr=tab1.insertRow()
for(i=0;i<o.cells.length;i++)
{
tr.style.backgroundColor="white"
tr.onmouseout=function(){this.bgColor="white"}
tr.onmouseover=function(){this.bgColor="#efffff"}
tr.onclick=function(){add2(this)}
tr.onclick=function(){add(this)}
tr.insertCell(i).innerHTML=o.cells(i).innerHTML
}
tab2.deleteRow(o.rowIndex)
}
</script>
posted on 2006-04-03 15:02
汪杰 阅读(279)
评论(0) 编辑 收藏 引用 所属分类:
hengxing网站js