如何在带拖拽排序的HTML表格Action列添加编辑/查看/删除功能

下面是修改后的完整代码，已将Action列的数字替换为带功能的符号，同时保留拖拽排序功能：

<!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>
    <style>
        table th, table td {
            padding: 8px;
            border: 0.5px solid black;
            text-align: center;
        }
        .GFG {
            color: green;
        }
        .OK {
            font-size: 18px;
        }
        .action-btn {
            margin: 0 3px;
            cursor: pointer;
            font-size: 16px;
        }
        .action-btn:hover {
            opacity: 0.7;
        }
        .select {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <h2 class="GFG">Overall Experience</h2>
    <p class="OK">Drag and Drop table row</p>
    <table id="GFG">
        <tr>
            <th>Action</th>
            <th>Question Subquestion/Text</th>
            <th>Sort order</th>
        </tr>
        <tr data-id="1">
            <td>
                <span class="action-btn view-btn">📋</span>
                <span class="action-btn edit-btn">✏️</span>
                <span class="action-btn delete-btn">🗑️</span>
            </td>
            <td>Question1</td>
            <td>1</td>
        </tr>
        <tr data-id="2">
            <td>
                <span class="action-btn view-btn">📋</span>
                <span class="action-btn edit-btn">✏️</span>
                <span class="action-btn delete-btn">🗑️</span>
            </td>
            <td>Question2</td>
            <td>2</td>
        </tr>
        <tr data-id="3">
            <td>
                <span class="action-btn view-btn">📋</span>
                <span class="action-btn edit-btn">✏️</span>
                <span class="action-btn delete-btn">🗑️</span>
            </td>
            <td>Question3</td>
            <td>3</td>
        </tr>
        <tr data-id="4">
            <td>
                <span class="action-btn view-btn">📋</span>
                <span class="action-btn edit-btn">✏️</span>
                <span class="action-btn delete-btn">🗑️</span>
            </td>
            <td>Question4</td>
            <td>4</td>
        </tr>
        <tr data-id="5">
            <td>
                <span class="action-btn view-btn">📋</span>
                <span class="action-btn edit-btn">✏️</span>
                <span class="action-btn delete-btn">🗑️</span>
            </td>
            <td>Question5</td>
            <td>5</td>
        </tr>
        <tr data-id="6">
            <td>
                <span class="action-btn view-btn">📋</span>
                <span class="action-btn edit-btn">✏️</span>
                <span class="action-btn delete-btn">🗑️</span>
            </td>
            <td>Question6</td>
            <td>6</td>
        </tr>
        <tr data-id="7">
            <td>
                <span class="action-btn view-btn">📋</span>
                <span class="action-btn edit-btn">✏️</span>
                <span class="action-btn delete-btn">🗑️</span>
            </td>
            <td>Question7</td>
            <td>7</td>
        </tr>
        <tr data-id="8">
            <td>
                <span class="action-btn view-btn">📋</span>
                <span class="action-btn edit-btn">✏️</span>
                <span class="action-btn delete-btn">🗑️</span>
            </td>
            <td>Question8</td>
            <td>8</td>
        </tr>
    </table>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <script>
        // 重新计算排序号的函数
        function updateSortOrder() {
            $("#GFG").find("tr").each(function(index) {
                if (index > 0) {
                    $(this).find("td").eq(2).html(index);
                }
            });
        }

        $(function () {
            // 拖拽排序功能
            $("#GFG").sortable({
                items: 'tr:not(tr:first-child)',
                dropOnEmpty: false,
                start: function (G, ui) {
                    ui.item.addClass("select");
                },
                stop: function (G, ui) {
                    ui.item.removeClass("select");
                    updateSortOrder();
                }
            });

            // 查看按钮跳转
            $(".view-btn").click(function() {
                const questionId = $(this).closest("tr").data("id");
                // 跳转到查看页面，替换成你的实际页面地址
                window.location.href = `view.html?id=${questionId}`;
            });

            // 编辑按钮跳转
            $(".edit-btn").click(function() {
                const questionId = $(this).closest("tr").data("id");
                // 跳转到编辑页面，替换成你的实际页面地址
                window.location.href = `edit.html?id=${questionId}`;
            });

            // 删除按钮功能
            $(".delete-btn").click(function() {
                $(this).closest("tr").remove();
                // 删除后重新计算排序号
                updateSortOrder();
            });
        });
    </script>
</body>

</html>

关键修改说明： #

1. 替换Action列内容：把原来的数字换成三个直观的功能符号（📋查看、✏️编辑、🗑️删除），给每个符号添加类名方便绑定事件，同时给行添加data-id属性用来传递问题标识。
2. 样式优化：给功能符号添加鼠标悬停效果，调整表格单元格内边距和对齐方式，提升交互体验。
3. 功能实现：
   • 删除：点击删除符号后移除当前行，调用updateSortOrder函数重新计算所有行的排序号。
   • 编辑/查看：点击符号后获取当前行的data-id，跳转到对应页面（代码里用模拟的相对路径，你可以替换成实际的页面地址）。
4. 重构排序逻辑：把原来的排序号更新逻辑抽成独立函数updateSortOrder，方便拖拽和删除操作后统一调用。

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