案例:自动生成表格

<!-- 案例:自动生成表格 -->
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Subject</th>
                <th>Score</th>
                <th>Operation</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
     
    <script>
        //1. 模拟数据,用一个包含多个对象的数组来存储数据
        var datas = [
            {
                dName:'Jim',
                subject:'JS',
                score:80
            },
            {
                dName:'LiLei',
                subject:'JS',
                score:100
            },
            {
                dName:'HanMeimei',
                subject:'JS',
                score:59
            },
        ];
        //2. 生成前三列数据
        var tbody = document.querySelector("tbody");        
        //console.dir(tbody);
        for(i=0; i<datas.length; i++){  
            //(1) 生成行       
            var tr = document.createElement("tr");
            tbody.appendChild(tr);
            //(2) 生成列
            for(k in datas[i]){
                var td = document.createElement('td');
                td.innerText = datas[i][k]
                tr.appendChild(td);
            }
            //3. 生成删除链接
            var del = document.createElement('td');
            del.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(del);            
        }
        //4. 实现删除功能         
        var dels = document.getElementsByTagName('a');  //(1)获取所有链接         
        for(i=0; i<dels.length; i++){
            dels[i].onclick = function(){  //(2)绑定删除事件
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

    </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。