用JavaScript动态创建表格_js如何做一个4*4表格-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40641206/article/details/104236587

本文介绍了一个使用HTML和JavaScript实现的动态表格生成方法。通过用户输入的行数、列数及标题，可以即时创建一个带有边框和单元格内容的表格。此方法适用于需要灵活展示数据的网页应用。

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

<!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>

在这里插入图片描述