用JavaScript动态创建表格

最新推荐文章于 2024-04-12 20:57:52 发布

先给自己打个气

最新推荐文章于 2024-04-12 20:57:52 发布

阅读量144

点赞数

分类专栏： JavaScript 文章标签： javascript html dom

本文链接：https://blog.csdn.net/qq_40641206/article/details/104236587

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    添加<input type="text" id="test1" size="4">行
    加<input type="text" id="test2" size="4">列
    标题为：<input type="text" id="test3">
    <input type="button" value="生成" onclick="change()">
    <div id="test"></div>
    <script>
        var change = function(){
            var t1 = document.getElementById("test1");
            var t2 = document.getElementById("test2");
            var t3 = document.getElementById("test3");
            document.getElementById("test").innerHTML="";
            t1=parseInt(t1.value);
            t2=parseInt(t2.value);
            if(isNaN(t1) && isNaN(t2)){
                alert("出错了");
                return false;
            }
            var table = document.createElement("table");
            table.style.borderCollapse="collapse";
            table.border=1;
            var caption = table.createCaption();
            caption.innerHTML=t3.value;

            for(var i=0;i<t1;i++){
                var tr = table.insertRow(i);
                for(var j=0;j<t2;j++){
                    var td = tr.insertCell(j);
                    td.style.padding="5px";
                    td.innerHTML="单元格内容"+i+j;
                }
            }
            document.getElementById("test").appendChild(table);
        }
    </script>
</body>
</html>

在这里插入图片描述

先给自己打个气

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript动态创建表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录