表格动态增加行(JS)

我最近一直在学Javascript, 因为在项目用的比较多，虽然现在大家都在说Web标准，实际上还没有一个严格的定义，我理解的Web标准是把结构、表现、行为这三者结合表现出来就OK了。那用什么来表现呢？当然是CSS样式，行为用什么来控制呢？就是Javascript,可想而知学习Javascript的重要性了，当然除了Javascript，还有Vbscript,不过本人比较倾向Javascript ,我也是刚学Javascript,以前一直忽视它，希望感兴趣的朋友一起学习，共同提高，哪位在这方面有经验的可以共享一下，好的论坛，网站，书籍等等！
回到话题：今天要说的是用JS脚本实现表格动态增加行。



实现代码：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< 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行追加

 

转载于:https://www.cnblogs.com/Qizai/archive/2007/09/18/897752.html