如何在ASP.NET C#中创建jQuery表格并动态增删表格行

因为你刚接触编程，对JS和jQuery完全陌生，我会从最基础的步骤讲起，附带完整可运行的代码示例。

第一步：先引入jQuery库 #

jQuery是一个JavaScript工具库，必须先在页面里加载它才能使用。最简单的方式是用公共CDN链接，把下面这行代码放在HTML的<head>标签里：

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

第二步：基础HTML结构 #

先在页面里留一个容器，用来放我们要创建的表格：

<div id="table-container"></div>

第三步：用jQuery生成表格的完整代码 #

下面是完整的可运行代码，包含HTML、CSS和jQuery逻辑，我会逐行解释：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery表格示例</title>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        /* 给表格加基础样式，方便查看 */
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div id="table-container"></div>

    <script>
        // 页面加载完成后执行代码（必须写这个，不然jQuery找不到页面元素）
        $(document).ready(function() {
            // 1. 创建表格元素，添加样式类
            let $table = $('<table>').addClass('data-table');
            
            // 2. 创建表头行
            let $headerRow = $('<tr>');
            // 表头单元格内容
            let headers = ['姓名', '年龄', '职业'];
            headers.forEach(function(headerText) {
                $headerRow.append($('<th>').text(headerText));
            });
            // 把表头加到表格的thead里
            $table.append($('<thead>').append($headerRow));
            
            // 3. 创建表格内容行
            let $tbody = $('<tbody>');
            // 模拟表格数据
            let tableData = [
                ['张三', 25, '前端开发'],
                ['李四', 30, 'UI设计'],
                ['王五', 28, '后端开发']
            ];
            // 循环生成每行数据
            tableData.forEach(function(rowData) {
                let $row = $('<tr>');
                rowData.forEach(function(cellText) {
                    $row.append($('<td>').text(cellText));
                });
                $tbody.append($row);
            });
            // 把tbody加到表格里
            $table.append($tbody);
            
            // 4. 把生成好的表格放到页面容器里
            $('#table-container').append($table);
        });
    </script>
</body>
</html>

关键代码解释 #

• $(document).ready(function(){ ... })：确保页面所有元素加载完成后再执行jQuery代码，避免找不到元素的问题。
• $('<table>')：用jQuery创建一个新的<table>元素，$()是jQuery的核心函数，用来选择或创建元素。
• .append()：把一个元素添加到另一个元素的内部末尾，比如把表头行加到thead里。
• forEach：JavaScript的循环方法，用来遍历数组里的每一项，批量生成表头和表格内容。

另一种方式：操作已有的HTML表格 #

如果你已经手动写了HTML表格，也可以用jQuery来修改它，比如添加新行：

<!-- 已有的HTML表格 -->
<table id="my-table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

<script>
$(document).ready(function() {
    // 给表格添加新行
    let newRow = '<tr><td>赵六</td><td>22</td></tr>';
    $('#my-table tbody').append(newRow);
    
    // 给所有表头添加背景色
    $('#my-table th').css('background-color', '#f2f2f2');
});
</script>

内容的提问来源于stack exchange，提问作者Kumar