jquery 写动态表格

宋圣斌 3周前 12浏览 0评论

JQuery是一种流行的JavaScript框架，它为开发人员提供了一种简便的方式来创建动态网页元素。这篇文章将介绍如何使用JQuery来创建动态表格。

首先，需要在HTML文件中引入JQuery库：

    
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们将使用JQuery来获取一个表格的DOM元素：

    
        var table = $('<table></table>');

现在，我们可以向表格中添加行和列。下面的代码将向表格添加三行和两列：

    
        for (var i = 0; i < 3; i++) {
            var row = $('<tr></tr>');
            for (var j = 0; j < 2; j++) {
                var cell = $('<td></td>');
                cell.text('Cell ' + (j + 1) + ' in row ' + (i + 1));
                row.append(cell);
            }
            table.append(row);
        }

最后，将表格添加到页面中的某个元素中：

    
        $('#myTableDiv').append(table);

完整的代码如下：

    
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Dynamic Table</title>
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        </head>
        <body>
            <div id="myTableDiv"></div>
            <script>
                var table = $('<table></table>');
                for (var i = 0; i < 3; i++) {
                    var row = $('<tr></tr>');
                    for (var j = 0; j < 2; j++) {
                        var cell = $('<td></td>');
                        cell.text('Cell ' + (j + 1) + ' in row ' + (i + 1));
                        row.append(cell);
                    }
                    table.append(row);
                }
                $('#myTableDiv').append(table);
            </script>
        </body>
        </html>

现在，在页面加载时，你将会看到一个含有三行两列的表格。

上一篇 HTML文字往下移的代码

下一篇 html标签中设置字体颜色

网站导航

网站导航

最近发表

文章归档

jquery 写动态表格