js-动态生成+删除表格

简单功能介绍：当点击删除时，所在删除的这一行将被删除

效果展示

步骤分析

1.表格中的数据并不是写死的，是我们通过创建一个datas对象动态获取到的，我们把数据写在里面，我们在H5代码里面的tbody里面是不需要写相关的数据的
2. 我们要在tbody里面创建行，这个行数是通过datas[i]数组的长度决定的
（1）先创建行数
（2）创建行数里面的单元格，这里面单元格的数量主要是取决于每个对象里面的属性值，有三个属性就创建3个单元格
（3）当我们创建完单元格后，就要考虑把datas[i]里面的数据值放在单元格里面。

for （k in obj)
k得到的是属性名
obj[k]得到的是属性值

3. 创建删除两个字的单元格，给删除按钮进行点击方法

代码

下面展示一些 代码。

 <table cellspacing="0">   
      <thead>      
            <tr>       
                   <th>姓名</th>        
                   <th>所选科目</th>     
                   <th>成绩</th>  
                   <th>操作</th>      
             </tr>      
       </thead>     
        <tbody></tbody>
    </table>

// An highlighted block
 <script>       
  //1.准备学生的数据，要js动态生成  
        var datas = [
        {                
            name: "小宝贝", 
            subject: "javascript",  
           score: 100     
          }, 
          {     name: "猪猪侠",  
                subject: "javascript",     
                score: 800   
           },
            {    name: "大脸猫",  
                 subject: "javascript", 
                  score: 50           
             }
            ]           
             //2.创建行,跟数据有关系的三个单元格 
         var tbody = document.querySelector("tbody");  
           //循环，i要小于datas里面的数据长度，这个for循环主要管的是行
                 for (var i = 0; i < datas.length; i++) {
                var tr = document.createElement("tr"); //创建tr节点  
                 tbody.appendChild(tr); //在tbody里面添加tr节点            //这个for循环是专门管tr里面的td行的，遍历数组datas[i]，  
     //在里面创建td，有多少个属性，就创建多少个td   
              for (var k in datas[i]) { 
           var td = document.createElement("td");     
                      //在tr里面创建td  
                  tr.appendChild(td);               
               //要让td获取到datas[i]里面的值，for...in 语句中                //for(k in obj)中k得到的是属性名，obj[k]得到的是属性值    
 //改变元素内容 element.innerHTML            
     td.innerHTML = datas[i][k];
            } 
             //3.创建有删除二字的单元格    
             var td = document.createElement("td");                    //给添加的td赋值        
               td.innerHTML = '<a href="javascript:;">删除 </a>';            //把添加的td给一下位置，放在tr里面      
                     tr.appendChild(td);      
                           //4.删除功能的实现      
           var as=document.querySelectorAll("a");
            as[i].onclick = function() {       
        //当我们点击as[i]里面的a元素时，删除的是as[i]父级元素td的父级元素td
          tbody.removeChild(this.parentNode.parentNode);          
            }
        }    </script>