记录学习第一天 ：关于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的节点并赋给trvar tr = document.createElement("tr");//在father所在节点的子节点的最后一个节点后面添加一个tr节点father.appendChild(tr);//用for in 循环来遍历每个date中对象的属性值for (var key in date[i]) {//创建一个名为td的节点并赋给tdvar 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)}
}
