JS 创建表格_js表格

作者：我家小花儿 | 2024-07-27 04:43:29

踩

js表格


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        var bgColor;//存储颜色变量
        var list = [
            { id: '1', country: '中国', capital: '北京' },
            { id: '2', country: '美国', capital: '华盛顿' },
            { id: '3', country: '日本', capital: '东京' },
            { id: '4', country: '韩国', capital: '首尔' },
        ];
        onload = function () {
            var body = document.getElementsByTagName('body')[0];
 
            //创建表格
            var table = document.createElement('table');
            //表格单元周围添加边框
            table.border = 1;
            body.appendChild(table);
            //创建标题行
            var thead = document.createElement('thead')
            var item0 = list[0];
            for (var key0 in item0) {
                //创建标题单元格
                var th = document.createElement('th');
                th.innerText = key0;//获取键
                thead.appendChild(th);
            }
            table.appendChild(thead);
 
            for (var i = 0; i < list.length; i++) {
                //遍历对象
                var item = list[i];
                //创建行
                var tr = this.document.createElement('tr');
                table.appendChild(tr);
                //注册事件
                tr.onmouseover = function () {
                    //指向时修改指向的颜色
                    bgColor = this.style.backgroundColor;
                    this.style.backgroundColor = 'green';
                };
                tr.onmouseout = function () {
                    //一开始恢复颜色
                    this.style.backgroundColor = bgColor;
                };
                //设置背景行颜色
                if (i % 2 == 0) {
                    //偶数行红色
                    tr.style.backgroundColor = 'red';
                }
                else {
                    //奇数行蓝色
                    tr.style.backgroundColor = 'blue';
                }
                //遍历对象
                for (var key in item) {
                    //创建单元格
                    var td = document.createElement('td');
                    //将键值赋值给td
                    td.innerText = item[key];
                    //单元格追加至行
                    tr.appendChild(td);
                }
            }
        };
            
    </script>
</head>
<body>
 
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/888721