JS动态创建表格

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

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读