我最近一直在学Javascript, 因为在项目用的比较多,虽然现在大家都在说Web标准,实际上还没有一个严格的定义,我理解的Web标准是把结构、表现、行为这三者结合表现出来就OK了。那用什么来表现呢?当然是CSS样式,行为用什么来控制呢?就是Javascript,可想而知学习Javascript的重要性了,当然除了Javascript,还有Vbscript,不过本人比较倾向Javascript ,我也是刚学Javascript,以前一直忽视它,希望感兴趣的朋友一起学习,共同提高,哪位在这方面有经验的可以共享一下,好的论坛,网站,书籍等等!
回到话题:今天要说的是用JS脚本实现表格动态增加行。
实现代码:
< HTML >
< HEAD >
< TITLE > Test </ TITLE >
< META NAME ="Generator" CONTENT ="EditPlus" >
< META NAME ="Author" CONTENT ="" >
< META NAME ="Keywords" CONTENT ="动态增加行" >
< META NAME ="Description" CONTENT ="http://qwzsky.cnblogs.com/" >
</ HEAD >
< style type ="text/css" >
table {
border : 1px solid black ;
}
td {
width : 100px ;
border : 1px solid black ;
}
</ style >
< script language ="javascript" type ="text/javascript" >
var rowNum = 0 ;
function insertRow()
{
var table1 = document.getElementById( " tbl " );
var tr1 = document.createElement( " tr " );
for ( var j = 0 ;j < 3 ; j ++ )
{
var td1 = document.createElement( " td " );
var tn = document.createTextNode(rowNum);
td1.appendChild(tn);
tr1.appendChild(td1);
}
rowNum = rowNum + 1 ;
// alert(tr1.childNodes[0].innerText);
table1.childNodes[ 0 ].appendChild(tr1);
// alert(table1.outerHTML);
}
</ script >
< BODY >
< input id ="Insert" type ="button" value ="Insert" onclick ="insertRow();" >
< table border ="1" id ="tbl" >
< tr >
< td > NO </ td >
< td > UserID </ td >
< td > Name </ td >
</ tr >
</ table >
</ BODY >
</ HTML >
keyword : 动态增加行,表格增加行,js动态增加行, 追加行,table行追加