Javascript 返回并刷新最近tr上的选择选项值

Javascript 返回并刷新最近tr上的选择选项值,javascript,jquery,json,ajax,datatable,Javascript,Jquery,Json,Ajax,Datatable,我有以下示例代码: <table id='myTable'> <tr> <td>Id</td> <td>Status</td> <td>Summary</td> </tr> </table> //Sample document ready function $(document).ready(function(){ $('#myTable')

我有以下示例代码:

<table id='myTable'>
 <tr>
    <td>Id</td>
    <td>Status</td>
    <td>Summary</td>
 </tr>
</table>

//Sample document ready function
$(document).ready(function(){
   $('#myTable').dataTable({
      "aoColumnDefs": [
         {
             "aTargets":[1],
             "createdCell": function (td, cellData, rowData, row, col){
                 if(cellData === 'ordered')
                   $(td).css('background-color', '#5cb85c');
                 if(cellData === 'not_ordered') 
                   $(td).css('background-color', '#d9534f');
                 if(cellData === 'shipped')
                   $(td).css('background-color', '#f0ad4e');
             }
         },
         {
            "aTarget": [2],
            "render": function(data, type, full, meta){
               if(type === 'display' && data == null) {
                  data = "enter field summary";
                  return '<input type="text"' + data +'>';
               }
               else
                 return '<input type="text"' + data + '>';
            }
         }
       ]
   });

  //With this function, i want to change the background-color of select field per option selected.However, the val() is returning "undefined"
  $('#myTable').on('change',function(){
     var optionField = $(this).closest('tr').find('option:selected').val();
     if(optionField === 'ordered')
        $(this).css({'background-color':'#696969'});
     else if(optionField === 'notOrdered')
        $(this).css({'background-color':'#e7e7e7'});
     else(optionField === 'shipped')
        $(this).css({'background-color':'#326f3a'});
  }

  $('table').on('click', 'input[type="submit"]', function(e)){
     var url = 'hiddenAPI.com';
     $.ajax({
         url: url,
         type: "POST",
         async: true,
         data: {
             id:      idField,
             status:  statusField,
             summary: summaryField
         },
         dataType: "json",
         success: function (data){
            $('#responseField').html('Order ' + idField + ', summary has been posted to the database successfully');
            $('#myTable').ajax.reload(); //<- table not refreshing here
         },
     });
  });

});
在上面的代码中,我希望每次选择一个select选项并根据上面代码中的每个值来确定时都更改背景色,并且在每次发布到数据库之后,我希望用新的JSON数据刷新整个datatable。到目前为止,datatable站点table.ajax.reload上提供的API不起作用

两个问题,, 1.使用上面的代码,在选择select选项后,如何更改datatable中特定列的背景色? 2.如何在每次发布到数据库后刷新datatable,而不必刷新整个窗口/页面?

在这里:

$(this).css({background-color':'#696969'});
     else if(optionField === 'notOrdered')
        $(this).css({background-color':'#e7e7e7'});
     else(optionField === 'shipped')
        $(this).css({background-color':'#326f3a'});
  }
背景色字符串的开头缺少一个额外的'


编辑:很抱歉,只是修复了一个语法错误

在玩过之后,我自己解决了这个问题。 1.为了刷新ajax数据,我最终从done函数中的另一个主函数调用了另一个ajax调用


二,。要单击并返回表行中最近的选定选项,我首先在表上创建了一个单击函数,然后为更改时选择嵌套了另一个函数,然后使用$this.closest'tr.find'select.val.

首先,在表选择器$'myTable.on'change'函数的末尾缺少一个引号{这将导致浏览器控制台中出现语法错误。为什么OP以外的人更改了源代码…@NewToJS这只是我的打字错误。整个代码检查时没有出现浏览器错误。上面的代码是我的代码片段,所以可能是我忘了添加的封闭单引号。@NewToJS,同意,一个完整的ed这仅仅是为了插入一个引号“…”?这没有意义。这可能是问题的原因,更可能只是一个打字错误。我理解有时人们在向问题添加源代码时会出错,但其他人更改源代码纯粹是基于他们的假设。源代码不应该除非OP说明存在真实错误或显示相关信息有困难,否则应予以更改/更正。