利用javascript动态生成表格及注释

记录学习第一天  ：关于javascript如何动态的生成表格

css样式想节省时间就没写,所以只有基本样式。

 html部分：

     创建一个表格（table）的头部（thead）和数据（tbody）标签。

<table border="1px"  cellspacing="0">
            <thead >
                <tr>
                    <th>姓名</th>
                    <th>学号</th>
                    <th>班级</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script src="../js/动态生成表格.js"></script>

 js部分：

1. 获取html的节点和创建静态数据的过程

 2.动态生成表格的过程

 3. 点击删除的时候删除节点的操作

要学习的知识点:

• createElement(创建节点 )               用法 ：document.createElement('要添加的节点')；
• appendChild(生成节点)                   用法 ：父节点 .appendChild('子节点');
• removeChild (删除节点 )                 用法： 父节点 .removeChild('子节点')；
• querySelectorAll (获取全部节点)     用法： document.querySelectorAll('节点'）；
• querySelector（获取一个节点）     用法： document.querySelector('节点');

var th = document.querySelectorAll("th");
var father = document.querySelector("tbody");
//创建一个数组里面包含多个对象
var date = [
    {
        name: "张三",
        number: "456",
        classn: "19网络",
        age: 25
    },
    {
        name: "李四",
        number: "789",
        classn: "12网络",
        age: 29
    }]

//数组中有多少个对象便循环多少次
for (var i = 0; i < date.length; i++) {
    //创建一个名为tr的节点并赋给tr
    var tr = document.createElement("tr");
    //在father所在节点的子节点的最后一个节点后面添加一个tr节点
    father.appendChild(tr);
    //用for in 循环来遍历每个date中对象的属性值
    for (var key in date[i]) {
        //创建一个名为td的节点并赋给td
        var td = document.createElement('td');
        //td输出的文本为date数组中每个对象的属性值。
        td.innerHTML = date[i][key];
        //在tr的子节点从前往后依次添加一个td节点
        tr.appendChild(td);
    }
    //创建删除按钮
    //创建一个td节点
    var td = document.createElement('td');
    //td中的文本为删除a标签
    td.innerHTML = "<a href='javascript:;'>删除</a>" ;
    //在tr的子节点后面从前往后进行插入td节点
    tr.appendChild(td);
}

//当上面的操作执行完毕后 有数据和删除键 
//执行删除操作
//获取所有的节点a(删除)   
var aa = document.querySelectorAll('a');
//有多少个节点a便执行多少次循环(给每个节点a绑定点击事件)
for(var i = 0;i<aa.length;i++){
    //点击节点a执行函数
    aa[i].onclick = function() {
        //此时this指向aa[i]   this.parentNode.parentNode---->就是a标签的父亲(td)的父亲(tr)
        //删除节点  语法：父节点.renoveChild(父节点的子节点)
        father.removeChild(this.parentNode.parentNode)
    }
}