javascript - Jquery 将项目从选择框移动到表，然后再返回...不适合我

Question

我有一个独特任务表，下面有一个可以添加的任务的下拉列表。

我希望下拉列表和表格是动态的，因为任务不能同时位于下拉列表和表格中。

因此下拉列表仅包含表中尚未存在的任务。

因此，如果我选择一个任务并单击“添加”，它将移动到表格中(并且不再位于下拉列表中)。但是，如果我从表中删除任务，它应该返回到下拉列表中。如果该行已经在表中(即在初始页面加载中)，则此功能有效，但是如果我向表中添加一行并将其删除，它不会进入下拉列表。

这是从下拉列表移动到表格的js代码

$('#addTaskButton').on('click',function() {
    var taskId = $('select[id=processorTasksId]').val();
    if (taskId == 0) {
        return;
    }
    var task = $( "#processorTasksId option:selected" ).text();
    $('#tasksTable').append('<tr><td>' + taskId + '</td>'
            + '<td>' + task + '</td>'
            + '<td contenteditable=\'true\'>0</td>'
            + '<td><input type="button" value="X"></td></tr>');

    $( "#processorTasksId option:selected" ).remove();
});

这是要从表中删除的 JS。

$('#tasksTable').on('click', 'input[type="button"]', function(){

       var taskId = $(this).closest('tr').children('td.taskIdCol').text();
       var taskDescription = $(this).closest('tr').children('td.taskDescriptionCol').text();
       $(this).closest('tr').remove();
       console.log("id = " + taskId);
       console.log("desc = " + taskDescription);

       $('#processorTasksId')
        .append($("<option></option>")
                   .attr("value",taskId)
                   .text(taskDescription));
    });

问题场景的控制台日志如下所示，它只是在下拉列表中添加了一个空选项

id = 
desc = 

知道如何解决这个问题吗？

Answer 1

问题在于作为脚本的一部分添加到表中的 td 缺少类。检查下面的工作代码

$(function() {

   $('#addTaskButton').on('click',function() {
    var taskId = $('select[id=processorTasksId]').val();
    if (taskId == 0) {
        return;
    }
    var task = $( "#processorTasksId option:selected" ).text();
    $('#tasksTable').append('<tr><td class="taskIdCol">' + taskId + '</td>'
            + '<td class="taskDescriptionCol">' + task + '</td>'
            + '<td contenteditable=\'true\'>0</td>'
            + '<td><input type="button" value="X"></td></tr>');

    $( "#processorTasksId option:selected" ).remove();
   });

   $('#tasksTable').on('click', 'input[type="button"]', function(){

       var taskId = $(this).closest('tr').children('td.taskIdCol').text();
       var taskDescription = $(this).closest('tr').children('td.taskDescriptionCol').text();
       $(this).closest('tr').remove();
       console.log("id = " + taskId);
       console.log("desc = " + taskDescription);

       $('#processorTasksId')
        .append($("<option></option>")
                   .attr("value",taskId)
                   .text(taskDescription));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="processorTasksId">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

</select>
<input type="button" id="addTaskButton" value="Add" /> 

<table id="tasksTable">

</table>