空のテーブルにjqueryを設定する

Question

私のサービスにGETリクエストを行ってアイテムを「検索」し、テーブルにレスポンスを設定しようとしていますが、私のコードでそれを達成できないようです。

$(function(){ 
var $searchInput = $("#search"); 
$("#searchOptions").change(function(){ 
if($(this).val() =="Fragment"){ 
$searchInput.keyup(function(e){ 
var q = $searchInput.val(); 
$.ajax({ 
    type: 'GET', 
    url: 'http://localhost:51834/CoffeeService.svc/getaorderfrag/' + q, 

    success: function(orders){ 
    $("#orderTable").empty(); 
    $.each(orders, function(i, order){ 
     $("#orderTable tbody").append('<tr><td>' + order.Name + '</td><td>' + order.Order + '</td><td>' + order.Price + '</td></tr>'); 
     }); 
     }   
     }); 
    }); 
    } 
}); 
}); 

Answer 1

あなたの$とjbutler483は右である、あなたがテーブル全体を殺している、thead要素、TBODY、（すべて）（ "＃orderTable"）、空（）;ステートメント。

あなたの追加は、存在しないものをターゲットにしています。これを試してみてください：

は

$(function(){ 
 
var $searchInput = $("#search"); 
 
$("#searchOptions").change(function(){ 
 
if($(this).val() =="Fragment"){ 
 
$searchInput.keyup(function(e){ 
 
var q = $searchInput.val(); 
 
$.ajax({ 
 
    type: 'GET', 
 
    url: 'http://localhost:51834/CoffeeService.svc/getaorderfrag/' + q, 
 

 
    success: function(orders){ 
 
    $("#orderTable tbody").empty(); 
 
    $.each(orders, function(i, order){ 
 
     $("#orderTable tbody").append('<tr><td>' + order.Name + '</td><td>' + order.Order + '</td><td>' + order.Price + '</td></tr>'); 
 
     }); 
 
     }   
 
     }); 
 
    }); 
 
    } 
 
}); 
 
});