【JAVAScript】实例 ——创建表格并删除（以及知识扩展）

JAVAScript动态创建表格并删除

本次主要介绍两个实用的关于建立动态数组的方法：JOSN和for in
以及上次博客提到的获取节点的实例方法

一、JSON语法

var date = [{name:'Jone',subject:'javeScript',grades:100},{name:'Mary',subject:'java',grades:58},{name:'Grade',subject:'C',grades:98},{name:'Sraz',subject:'C#',grades:99},{name:'张锦怡',subject:'物联网工程',grades:'100'}];

二、for in

for…in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

var obj = {a:1, b:2, c:3};for (var prop in obj) {console.log("obj." + prop + " = " + obj[prop]);
}// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

可以得出prop为属性，obj[prop]为属性值

三、实例

基本HTML如下，布局就不再过多讲解

思路：先创建对应date[n]的行数，在根据对于属性的个数创建列。剩下的一列创建删除按钮

 var tbody = document.querySelector('tbody');//根据date的数组长度创建相应的行数for(var i = 0; i < date.length; i++){var tr = document.createElement('tr');tbody.appendChild(tr);//根据属性值按每个单元行创建单元，总结为创建列数for(var k in date[i]){var td = document.createElement('td');//将属性值赋给单元格td.innerHTML = date[i][k];tr.appendChild(td);}//添加最后一列的删除栏var td = document.createElement('td');td.innerHTML = "<a href = 'javascript:;''>删除</a>"tr.appendChild(td);}//点击事件var a = document.getElementsByTagName('a');for(var j = 0; j < a.length; j++){a[j].addEventListener('click',function(){//删除tbody里的a的父亲(tr)的父亲(td)tbody.removeChild(this.parentNode.parentNode)})}    

错误总结：
1这个错误是有数组越界产生的，在写监听函数时一定要注意数组越界问题

2当触发事件失效时：关注tbody.removeChild(this.parentNode.parentNode)是一定要注意this的用法和移除事件到底是说明

3 js的使用如果在页面元素未加载前容易出现报错问题，这个时候应该考虑使用window.onload的用法了（下节细讲）

总结

提示：使用了JSON和for in 大大简化程序（但也可以使用方法函数和if-else来做）。这个实例强化了获取元素和监听函数的用法。有错误还望指出