Jquery 表格制作 编辑、删除 、添加功能

以下是一个使用jQuery实现表格编辑、删除和添加功能的简单示例。

HTML部分：

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <!-- 表格数据将动态添加在这里 -->
    </tbody>
</table>
 
<button id="addBtn">Add New</button>

CSS部分（可选）：

table {
    width: 100%;
    border-collapse: collapse;
}
 
table, th, td {
    border: 1px solid black;
}
 
th, td {
    padding: 10px;
    text-align: left;
}

jQuery部分：

$(document).ready(function() {
    // 添加新行
    $('#addBtn').click(function() {
        var newRow = '<tr><td><input type="text" name="name" /></td>' +
                     '<td><input type="text" name="age" /></td>' +
                     '<td><button class="editBtn">Edit</button>' +
                     '<button class="deleteBtn">Delete</button></td></tr>';
        $('#myTable tbody').append(newRow);
    });
 
    // 编辑行
    $('#myTable').on('click', '.editBtn', function() {
        var $row = $(this).closest('tr');
        $row.find('td').each(function() {
            var $input = $('<input type="text" />');
            $input.val($(this).text());
            $(this).html($input);
        });
        $(this).remove();
        $row.append('<button class="saveBtn">Save</button>');
    });
 
    // 保存编辑后的行
    $('#myTable').on('click', '.saveBtn', function() {
        var $row = $(this).closest('tr');
        $row.find('td').each(function() {
            var $input = $(this).find('input');
            $(this).html($input.val());
        });
        $(this).remove();
        $row.append('<button class="editBtn">Edit</button>');
    });
 
    // 删除行
    $('#myTable').on('click', '.deleteBtn', function() {
        $(this).closest('tr').remove();
    });
});

确保在HTML中引入了jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

这个示例提供了添加新行、编辑行数据以及删除行的基本功能。点击“Add New”按钮会添加一个新的空白行，其中包含输入字段。点击“Edit”按钮会将单元格中的文本替换为输入字段，并允许用户编辑。点击“Save”按钮会保存编辑后的数据，并将编辑按钮和保存按钮互换。点击“Delete”按钮会删除相应的行。