动态生成表格实例(html-javascript操作表格处理)

最新推荐文章于 2024-03-18 19:05:06 发布

派大锌老板

最新推荐文章于 2024-03-18 19:05:06 发布

阅读量460

点赞数 2

分类专栏： JavaScript 文章标签： js javascript html web css

本文链接：https://blog.csdn.net/zinc1234596/article/details/113830642

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

动态生成表格案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            margin: 100px auto;
            border: 1px solid black;
        }
        thead tr{
            background-color: grey;
        }
        thead tr th{
            border: 1px solid black;
        }
        tbody tr{
            text-align: center;
            background-color: rgb(109, 201, 185);
        }
        tbody tr td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>name</th>
                <th>subject</th>
                <th>score</th>
                <th>action</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var datas = [
            {
                name:'john',
                subject:'math',
                score:'99'
            },
            {
                name:'king',
                subject:'english',
                score:'75'
            },
            {
                name:'micheal',
                subject:'chinese',
                score:'100'
            }
        ]
        var tbody = document.querySelector('tbody')
       
        for (var index = 0; index < datas.length; index++) {
            var tr = document.createElement('tr')
            tbody.appendChild(tr)
            for (var k in datas[index]) {
                var td = document.createElement('td')
                // console.log(datas[index]);
                // console.log(datas[index][k]);
                td.innerHTML = datas[index][k]
                tr.appendChild(td)

            }
            var td = document.createElement('td')
            td.innerHTML = '<a href="javascript:;">detele</a>'
            td.style.cssText='background-color:rgb(201, 176, 109);'
            tr.appendChild(td)
            
        }
        var as = document.querySelectorAll('a')
        for (let index = 0; index < as.length; index++) {
            as[index].onclick = function(){
               tbody.removeChild(this.parentNode.parentNode)
            } 
        }
    </script>
</body>

</html>

派大锌老板

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
动态生成表格实例(html-javascript操作表格处理)

动态生成表格案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{
复制链接

扫一扫

专栏目录