码迷,mamicode.com
首页 > 其他好文 > 详细

很接近原生渲染了吧!!!!!

时间:2020-07-04 18:40:52      阅读:48      评论:0      收藏:0      [点我收藏+]

标签:remove   select   data   for   append   end   UNC   document   nbsp   

 var datas = [
        {
            name: ‘张三‘,
            subject:‘Javascript‘,
            score:100
        },
        {
            name: ‘李四‘,
            subject:‘Javascript‘,
            score:98
        },
        {
            name: ‘王五‘,
            subject:‘Javascript‘,
            score:80
        },
        {
            name: ‘赵六‘,
            subject:‘Javascript‘,
            score:60
        }
    ]
    
       //往tbody里面创建行 ; 有几个人就创建几行(通过数组的长度)
       var tbody = document.querySelector(‘tbody‘);
       for(var i=0; i<datas.length; i++){
           //创建tr行
           var tr = document.createElement(‘tr‘);
           tbody.appendChild(tr);
           //根据对象属性的数量来创建单元格
           for(var k in datas[i]){
               //创建单元格
               var td = document.createElement(‘td‘);
               //将对象的属性值给单元格
               td.innerHTML = datas[i][k]
               tr.appendChild(td);
           }
           //创建a删除标签
           var td = document.createElement(‘td‘);
           td.innerHTML = "<a href=‘javascript:;‘> 删除</a>";
           tr.appendChild(td)
       } 
       var as = document.querySelectorAll(‘a‘);
       for(var i=0; i<as.length; i++){
           as[i].onclick = function(){
               //点击a删除 所在行
               tbody.removeChild(this.parentNode.parentNode)
           }
       }

很接近原生渲染了吧!!!!!

标签:remove   select   data   for   append   end   UNC   document   nbsp   

原文地址:https://www.cnblogs.com/xu3241/p/13235865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!