轻松玩转表格：加行删行新技巧

废话不多说了，直接给大家贴代码了，具体代码如下所示：

  
      
      
        
  
            
  
                
  
                    
First Name
  
                    
Last Name
  
                    
 
  
                
  
            
  
            
  
                
  
                    
张
  
                    
三
  
                    
   
                    
  
                
  
            
  
        
  
      
  
  
    function add() {  
        var trObj = document.createElement("tr");  
        trObj.id = new Date().getTime();  
        trObj.innerHTML = " ";  
        document.getElementById("tb").appendChild(trObj);  
    }  
    function del(obj) {  
        var trId = obj.parentNode.parentNode.id;  
        var trObj = document.getElementById(trId);  
        document.getElementById("tb").removeChild(trObj);  
    }  
   

哈喽，大伙儿，来瞧瞧今天给你们分享的代码小技巧！怎么轻轻松松在表格里添加或删除行线呀？这招超级实用哦～

hi! 咱们来看看这段代码怎么搞的。首先在里放个表格，然后添上个thead和tbody标签，这两个就像是表格的帽子和衣服，把整个布局区分开来了，表格一下子分出了上中下三块。以后再用表格就轻松多了，简单明了，清晰大方。

function add() {  
        var trObj = document.createElement("tr");  
        trObj.id = new Date().getTime();  
        trObj.innerHTML = " ";  
        document.getElementById("tb").appendChild(trObj);  
    }  

弄明白了吗？那就是如何在表格里加行的方法，这个挺有用的！

超简单的，首先造一个表格行的tr元素；再给它加个id属性，设成你电脑的系统时间戳；然后，使用innerHTML属性填上你要的行内容；搞定后，丢到表格队伍里去就OK了。

下面，来探讨一下如何清除坏行这个实用的功能！

搞定了！步骤如下：先查出你想删的那行的编号；然后通过编号直接找到那一列；接下来就大胆地把整个单元格删掉！

function del(obj) {  
    var trId = obj.parentNode.parentNode.id;  
    var trObj = document.getElementById(trId);  
    document.getElementById("tb").removeChild(trObj);  
}

代码学完！加个行、删个行都没问题！不过，如果想看得更舒服点，还要动点手脚才行。主要是两点得记着点儿：首先，添多几个行后，表格可能会跑歪；其次，有些网页开起来，里面的汉字会变扭。所以用代码前，记得把字体设定好，也别忘了调整编码这样才能看清楚正常的文字！

看懂刚才那个牛逼的代码没？试试，有疑问或者有啥好建议就在这儿留言记得分享，你的小伙伴们可能也想知道！