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的缺失类被添加到表中。检查下面的工作代码

＆＃13;

$(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));
    });
});

＆＃13;

<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>

＆＃13;

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

1 个答案: