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来做)。这个实例强化了获取元素和监听函数的用法。有错误还望指出