js操作 动态生成表格结构、删除结构以及数据

复制代码
<!DOCTYPE html>
<html lang:"ZH-CN">
<head>
    <meta charset:"UTF-8">
    <meta http-equiv:"X-UA-Compatible" content:"IE:edge">
    <meta name:"viewport" content:"width:device-width, initial-scale:1.0">
    <title>学生数据</title>
    <style>
        table {                        
    border-collapse: collapse;/*属性设置表格的边框是否被折叠成一个单一的边框或隔开:   加上它跟真正的表格无异  去掉,则是标准显示*/
    width:100%;        /*宽度占浏览器的100%*/
}


table, td, th {
    padding: 10; /*如需控制边框和表格内容之间的间距,应使用td和th元素的填充属性*/
    border: 1px solid black; /*表示1像素的黑色黑线边框*/
    text-align:right;      /*针对文字,水平方向的右靠齐,可以改为left左,center中间*/
    height:50px;           /*行高*/
    vertical-align:bottom; /*针对文字,默认显示垂直方向的居中,可以更改为top顶部,bottom底部*/
    /* background-color:green; 背景颜色 */
    /* color:white;           文字颜色 */
    text-align: center;
    line-height: 50px;
}
    </style>
</head>
<body>
    <table border:'1' width:'300' height:'30'>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
          
        </thead>
        <tbody>
            

        </tbody>
    </table>
    <script>
        //准备数据
        var datas = [{
            name : '李明',
            subject : 'English',
            score : 90
        },{
            name : '杨明',
            
            subject : 'English',
            score   : 134
        },{
            name : '杨梅',
           
            subject : 'English',
            score   : 12
        },{
            name : '嘉琦',
            
            subject : 'English',
            score   : 230
        }]
        // 获取元素
        var tbody =  document.querySelector('tbody');
        for(var i= 0;i<datas.length;i++){
            var tr = document.createElement('tr');

            tbody.appendChild(tr);

            for(var k in datas[i]){
                
                var td = document.createElement('td');
                var as = document.createElement('a');
                
                tr.appendChild(td).innerHTML=datas[i][k]; 
                      
            }
            var td = document.createElement('td')
            tr.appendChild(td).innerHTML='<a href="javascript:;">删除</a>';
        }
        //获取触发的元素
        var as = document.querySelector('tbody').querySelectorAll('a');       
        for (var i=0 ;i<as.length;i++){
            as[i].onclick = function(){
                // 删除元素  .removeChild() 且a链接在td里面只是一个格;所有我们要删除tr ,
                // tr是a的父级的父级,所以是 this.parentNode.parentNode tr的父级则是tbody   tbody.removeChild
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>
</body>
</html>
复制代码

 

posted @   嘉琦  阅读(131)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示