Jquery将项目从选择框移动到表，然后再返回...对我不起作用

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在使用 jQuery 处理选择框（select）和表格（table）之间的数据移动时，可能会遇到一些常见的问题。以下是一些基础概念和解决方案，帮助你解决这个问题。

基础概念

选择框（Select）：HTML 中的一个元素，允许用户从多个选项中选择一个或多个选项。
表格（Table）：HTML 中用于展示数据的二维结构。
jQuery 选择器：用于选择 DOM 元素。
jQuery 方法：用于操作 DOM 元素和处理事件。

类型和应用场景

数据移动：在表单元素之间移动数据，如从选择框到表格。
动态内容更新：根据用户交互动态更新页面内容。
表单验证：使用 jQuery 进行客户端表单验证。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 将选项从选择框移动到表格，然后再返回。

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Data Movement</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="sourceSelect" multiple>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <button id="moveToTable">Move to Table</button>
    <button id="moveToSelect">Move to Select</button>

    <table id="dataTable" border="1">
        <tbody>
            <!-- Data will be moved here -->
        </tbody>
    </table>

    <script src="script.js"></script>
</body>
</html>

jQuery 脚本（script.js）

$(document).ready(function() {
    $('#moveToTable').click(function() {
        $('#sourceSelect option:selected').each(function() {
            var optionText = $(this).text();
            var optionValue = $(this).val();
            $('#dataTable tbody').append('<tr><td>' + optionText + '</td><td>' + optionValue + '</td></tr>');
            $(this).remove();
        });
    });

    $('#moveToSelect').click(function() {
        $('#dataTable tbody tr').each(function() {
            var rowData = $(this).find('td');
            var optionText = rowData.eq(0).text();
            var optionValue = rowData.eq(1).text();
            $('#sourceSelect').append($('<option>', {
                value: optionValue,
                text: optionText
            }));
            $(this).remove();
        });
    });
});