JavaScript函数创建表格

最新推荐文章于 2020-04-05 22:22:37 发布

BUGliuzongyuan

最新推荐文章于 2020-04-05 22:22:37 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript 文章标签： JavaScrip

本文链接：https://blog.youkuaiyun.com/Year98Programmer/article/details/102890631

版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何利用JavaScript编程实现动态创建表格的功能，详细讲解了在网页中生成表格的步骤和关键代码，帮助开发者提升前端交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript使用函数创建表格

<button onclick="formStuden()">点我创建表格</button>
    <script>
        function formStuden() {
            //创建表
            var atb = document.createElement('table');
            document.body.appendChild(atb);
            //创建表名字
            var os = document.createElement('caption');
            atb.appendChild(os);
            os.innerHTML = ('学生信息表');
            //创建表头
            var ot = document.createElement('thead');
            atb.appendChild(ot);
            //添加tr
            var or = document.createElement('tr');
            ot.appendChild(or);
            //添加tr内容th
            //内容th编号
            var th1 = document.createElement('th');
            th1.innerHTML = ('编号');
            or.appendChild(th1);
            //内容th姓名
            var th2 = document.createElement('th');
            th2.innerHTML = ('姓名');
            or.appendChild(th2);
            //内容th年龄
            var th3 = document.createElement('th');
            th3.innerHTML = ('年龄');
            or.appendChild(th3);
            //内容th操作
            var th4 = document.createElement('th');
            th4.innerHTML = ('操作');
            or.appendChild(th4);
            //创建主体
            var op = document.createElement('tbody');
            atb.appendChild(op);
            //输出行号
            //定义输出10行
            for (i = 0; i < 10; i++) {
                //添加tr
                var rr = document.createElement('tr');
                op.appendChild(rr);
                //添加th1
                var oth1 = document.createElement('th');
                rr.appendChild(oth1);
                oth1.innerHTML = ('1000');
                //添加th2
                var oth2 = document.createElement('th');
                rr.appendChild(oth2);
                oth2.innerHTML = ('张三');
                //添加th3
                var oth3 = document.createElement('th');
                rr.appendChild(oth3);
                oth3.innerHTML = ('20');
                //添加th4
                var oth4 = document.createElement('th');
                rr.appendChild(oth4);
                var och = document.createElement('a');
                och.innerHTML = ('删除');
                //删除创建的表格
                och.onclick = function () {
                    var s = this.parentNode.parentNode;
                    s.parentNode.removeChild(s);
                }
                oth4.appendChild(och);
            }
        }
    </script>