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