zoukankan      html  css  js  c++  java
  • 很接近原生渲染了吧!!!!!

     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)
               }
           }
  • 相关阅读:
    js_Array类型_find和findIndex
    js_正则表达式专项
    html5_音视频元素_audio&video
    html5_延迟(defer)脚本与异步(async)脚本
    html5_头部七元素_base元素
    html5_头部七元素_link元素
    html5_头部七元素_meta元素
    css_@media
    js_事件类型——鼠标点击事件
    puppeteer headless
  • 原文地址:https://www.cnblogs.com/xu3241/p/13235865.html
Copyright © 2011-2022 走看看