jQuery动态添加和删除表格记录 

<!DOCTYPE html>
<html>
<head>
    <title>jQuery动态添加和删除表格记录</title>
    <script src="Scripts/jquery-3.4.1.min.js"></script>    
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <!-- 这里将动态添加数据 -->
        </tbody>
    </table>

    <script>
        //$(document).ready(function () {
        //    // 获取表格主体
        //    var tbody = $("#myTable tbody");
        //    // 创建新的行和单元格
        //    var newRow = $("<tr>");
        //    var nameCell = $("<td>").text("苹果");
        //    var priceCell = $("<td>").text("$1.99");
        //    // 将单元格添加到行中
        //    newRow.append(nameCell);
        //    newRow.append(priceCell);
        //    // 将行添加到表格主体中
        //    tbody.append(newRow);
        //});

        $(document).ready(function () {
            var tbody = $("#myTable tbody");
            // 数据集合
            var data = [
                { name: "苹果", price: "$1.99" },
                { name: "香蕉", price: "$0.99" },
                { name: "橙子", price: "$2.49" }
            ];
            // 遍历数据集合
            for (var i = 0; i < data.length; i++) {
                var newRow = $("<tr>");
                var nameCell = $("<td>").text(data[i].name);
                var priceCell = $("<td>").text(data[i].price);
                newRow.append(nameCell);
                newRow.append(priceCell);
                tbody.append(newRow);
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>jQuery动态添加和删除表格记录</title>
    <script src="Scripts/jquery-3.4.1.min.js"></script>   
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" name="name"></td>
                <td><input type="text" name="age"></td>
                <td><input type="checkbox"></td>
            </tr>
        </tbody>
    </table>
    <button id="addButton">添加记录</button>
    <button id="deleteButton">删除记录</button>

    <script>
    $(document).ready(function() {
      // 添加记录按钮点击事件
      $('#addButton').click(function() {
        var table = $('#myTable');
        var lastRow = table.find('tbody tr:last');
        var newRow = lastRow.clone();
        newRow.find('input').val('');
        table.append(newRow);
      });

      // 删除记录按钮点击事件
      $('#deleteButton').click(function() {
        var selectedRows = $('#myTable input[type="checkbox"]:checked');
        selectedRows.each(function() {
          var row = $(this).closest('tr');
          row.remove();
        });
      });
    });
    </script>
</body>
</html>

 

posted @ 2024-09-08 11:45  每天进步多一点  阅读(89)  评论(0)    收藏  举报