JS动态创建表格

最新推荐文章于 2024-05-01 11:05:38 发布

Forgive小麟

最新推荐文章于 2024-05-01 11:05:38 发布

阅读量264

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/forgive66/article/details/106298575

版权

<!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>
    <style>
        .tableCls, .tableCls td{
            border: 1px solid red;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    表格的行数：<input type="text" id="rowsCount"><br>
    表格的列数：<input type="text" id="colsCount"><br>
    <button id="createTable">创建表格</button>
    <div id="table-wrap" class="wrap"></div>
    <script>
        var createTableBtn = document.querySelector("#createTable");
        //给button添加点击事件
        createTableBtn.onclick = function(){
            // 获取用户输入的行数和列数
            var rowsCount = parseInt(document.querySelector("#rowsCount").value);
            var colsCount = parseInt(document.querySelector("#colsCount").value);
            console.log("行数：" + rowsCount + ",列数：" + colsCount);
            var tableStr = "<table class='tableCls'>"; //表格的字符串代码
            var tableWrap = document.querySelector("#table-wrap");
            var rowStr = "";  //行的字符串的代码
            // 拼接创建行和列
            for(let i=1;i<=rowsCount;i++){
                rowStr += "<tr class='tr-"+ i +"'>";
                // <tr class='tr-1'>
                var tdStr = "";
                for(let j=1;j<=colsCount;j++){
                    tdStr += "<td>这是第"+i+"行第"+j+"列的单元格</td>";
                }
                // <td>这是第1行第1列的单元格</td><td>这是第1行第2列的单元格</td>
                rowStr = rowStr + tdStr + "</tr>";
            }
            // console.log(rowStr);
            tableStr = tableStr + rowStr + "</table>";
            // console.log(tableStr);
            tableWrap.innerHTML = tableStr;
        };
    </script>
</body>
</html>

Forgive小麟

关注

0
点赞
踩
0

收藏

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title&...
复制链接

扫一扫