当前位置:   article > 正文

表格动态增加行(JS)

行不够使用时,用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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/668929
推荐阅读
相关标签
  

闽ICP备14008679号