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

时间:2016-08-12 15:34:53

标签: javascript jquery html

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

我希望下拉列表和表格是动态的,因为任务不能同时包含在下拉列表和表格中。

因此,下拉列表仅包含表中没有的任务。

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

这是从下拉列表移动到表

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

有关如何修复的想法吗?

1 个答案:

答案 0 :(得分:2)

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

&#13;
&#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;
&#13;
&#13;