前几天在项目中，用到了一些前端的小技巧，一个是我现在要写的，还有一个就是三个select的联动。我写这篇博客的目的是：1.供自己以后随时查阅用 2.希望对他人也有所帮助，因为总有还不会的。  这个话题虽然网上也有人写过。但我争取把这篇博客写的更详细些。

       先来个效果图：我最终想实现的就是当点击添加时，table当前最后一行下面添加新的一行。

      

       这个其实还满简单的，主要会用到js中的一些操纵table的tr和td的方法，但第一次用的人往往会遇到一些小问题。所以请看代码~

       HTML代码：

1  2     
     
       3         
      
        4             
          5                 
 8             
 9             
         10                 
32             
33         
 6                      7                 
11                     
          
           12 
             13 
14 
15 
16 
17 
18 
30 
           
            
             
序号
             
处理时限
             
相关要求
             
责任人
            
                       
          
31                 
34     
     
35 

        在这段代码中，我定义了了一个添加按钮和一个带表头的table。并且为添加按钮添加了一个click事件响应：addRow()函数。 

        JS代码：

 

1 

 

        结合上面的js的代码，我们可以看出：

        1.先利用getElementById获得table。之后访问它的rows的属性，最终获得length的长度。对于这个长度的使用，我在上面代码的注释中已经写明！

        2.我们利用insertRow()这个js方法在最下面插入新的一行tr。

        3.我们利用insertCell插入四个td，对应表的四列。

        4.访问每个td的innerHTML属性，我给第一个td中添加的是序号，第二个td中添加的是一个日期控件，第三个td添加的是一个文本框，第四个td添加的是一个select。

         其实感觉也没什么好说的了。。。。你运行一遍就什么都明白了，附上效果图：

         

            PS：我们用的这个日期控件是js编写的，我刚才简单试了下，ie下没问题，chrome下失效了，需要的话所以你可以替代为文本框。

            源代码：