动态生成表格

 

 

 

css样式

 <style>
        table {
            margin: 100px auto;
            text-align: center;
            width: 500px;
            border-collapse: collapse;
        }
        td,
        th {
            border: 1px solid #333;
        }
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>

html部分代码

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

js部分、

 //1.先准备好学生的数据
    var datas =[
    {
        name:'爱',
        subject:'JavaSctipt',
        score:'100'
    },
    {
        name:'学',
        subject:'JavaSctipt',
        score:'99'
    },{
        name:'习',
        subject:'JavaSctipt',
        score:'98'
    },{
        name:'哦',
        subject:'JavaSctipt',
        score:'100'
    }
    ];
    //2.往tbody里面创建行 
    var tbody = document.querySelector('tbody');
    for(var i = 0 ;i<datas.length;i++){
        //1.创建tr行
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        //2.行里面创建单元格 td 单元格的数量取决于每个对象里面的属性的个数
        for(var k in datas[i]){
            //k得到的是属性名
            //obj[k]得到的是属性值
            //创建单元格
            var td= document.createElement('td');
            // console.log(datas[i][k]);
            //把对象里面的属性值给单元格 td
            td.innerHTML=datas[i][k];
            tr.appendChild(td);
        }
        //3.创建有删除两个字的单元格
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除</a>'
        tr.appendChild(td);
    }
    //4.删除操作开始
    var as = document.querySelectorAll('a');
    for(var i =0 ;i<as.length;i++){
        as[i].onclick = function(){
            //点击a删除a所在的行node.removeChild(child)
            tbody.removeChild(this.parentNode.parentNode);
        }
    }