原生js和jQuery创建动态表格的两种方法

逐渐心动

已于 2022-03-23 23:13:07 修改

阅读量2.2k

点赞数

文章标签： jquery javascript

于 2022-03-23 22:33:21 首次发布

本文链接：https://blog.csdn.net/weixin_44701385/article/details/123698395

版权

第一种jQuery方法创建动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 注意这里插入的jQuery -->
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <!-- 给input一个id 获取用户输入的行和列 -->
    行：<input id="row1"></input>
    列：<input id="col1"></input>
    <!-- 给创建表格这个按钮一个id为他绑定一个点击事件 -->
    <button id="createTable">创建表格</button>
    <!-- 给div一个id用来存放表格 -->
    <div id="div1"></div>

    
    <script>
        // 为按钮点击创建表格写一个方法
       $("#createTable").click(function(){
        //    将用户输入的行和列存到一个变量里面
        var rows = $("#row1").val();
        var cols = $("#col1").val();
        // 设置表格的属性
        var table = $('<table height="100px" width="100"border = "1px"></table>')
        // 将表格添加在div下面
        $("#div1").append(table);
        // 用for循环创建表格
        for (var i = 0; i < rows; i++) {
            var tr = $('<tr></tr>');
            $(table).append(tr);
        

        for(var j = 0; j < cols; j++) {
            var td = $('<td></td>');
            $(tr).append(td);
        }
    }
    }) 
    </script>
</body>
</html>

第二种方法原生js创建动态表格

<!DOCTYPE html>
<html>

<head>
    <title>createTable2.html</title>
    <style type="text/css">
        table {
            border: solid 2px;
            border-collapse: collapse;
        }

        td {
            border: solid 2px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <!-- 先给用户输入的行数和列数一个id方便后面document获取 -->
    行：<input id="row">
        列：<input id="col">
    <!-- 给添加按钮绑定一个单机事件用来创建表格 -->
        <button onclick="createTable()">创建表格</button>
    <!-- div的目的是为了存放表格 -->
        <div id="div1"></div>
       
    <script>
        //获取用户输入的内容
        function createTable() {
            //注意 ： 不管是添加元素还是删除元素，都要通过父元素来进行操作
            // 获取用户输入的行和列
            var row = document.getElementById("row").value;
            var col = document.getElementById("col").value;

            // 获取div标签
            var div1 = document.getElementById("div1")

            // 创建一个表格元素
            var table = document.createElement("table");

            // 设置表格的属性
            table.setAttribute("width", "300px", "height", "100px", "border", "1px solid")

            // 将表格添加在div标签下
            div1.appendChild(table)

            // 使用for循环创建表格
            for (var i = 0; i < row; i++) {
                var tr = document.createElement("tr");
                for (var j = 0; j < col; j++) {
                    var td = document.createElement("td");
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
        }
    </script>
</body>

</html>