Question

我需要能夠根據所選的下拉菜單項目來顯示錶格。我不知道用javascript寫什麼。我到目前爲止的代碼是：

JS：

//change table viewed 

$("#view").change(function (event) { 
$.getJSON('view.php?view=' + $(this).val(), function (json) { 


}); 
}); 

HTML：

   <div> 
       View: <select id="view"><option value="failed">Failed</option><option value="pending">Pending</option><option value="both">Both</option></select> 
       <table id="jobs-failed" border="1"> 
       <tr><th>ID</th><th>Media</th><th>Playlist</th><th>Input</th><th>Output</th><th>Bit Rate</th><th>Status</th><th>Encoder</th><th>Progress</th></tr> 
       <tr><td>2851</td><td>1849474</td><td>367</td><td>txt</td><td>html</td><td>best</td><td>failed</td><td>encvm2</td><td>NULL</td></tr> 
       </table> 
       <table id="jobs-pending" border="1"> 
       <tr><th>ID</th><th>Media</th><th>Playlist</th><th>Input</th><th>Output</th><th>Bit Rate</th><th>Status</th><th>Encoder</th><th>Progress</th></tr> 
       <tr><td>2344</td><td>1843278</td><td>455</td><td>mp3</td><td>wav</td><td>best</td><td>pending</td><td>encvm1</td><td>NULL</td></tr> 
       </table> 
       <table id="jobs-both" border="1"> 
       <tr><th>ID</th><th>Media</th><th>Playlist</th><th>Input</th><th>Output</th><th>Bit Rate</th><th>Status</th><th>Encoder</th><th>Progress</th></tr> 
       <tr><td>2851</td><td>1849474</td><td>367</td><td>txt</td><td>html</td><td>best</td><td>failed</td><td>encvm2</td><td>NULL</td></tr> 
       <tr><td>2344</td><td>1843278</td><td>455</td><td>mp3</td><td>wav</td><td>best</td><td>pending</td><td>encvm1</td><td>NULL</td></tr> 
       </table> 
       </div> 

謝謝！

Answer 1

這感覺就像一個「教我如何編程」的問題（而不是一個「我怎麼解決這一個特定的編程問題」的問題），所以我會變得有點簡潔，但是...

$("#view").change(function (event) { 

你已經明白了這一點。

$.getJSON('view.php?view=' + $(this).val(), function (json) { 

正如Josh指出的，除非您使用AJAX，否則這是錯誤的。根據你在喬希的回答中的評論，我會認爲情況並非如此;即。你有一些內容已經準備好可以在頁面上進行交換了。在這種情況下，做交換是那樣簡單：

function doSwap(id) { 
    // This is just one way of doing the swap; see jQuery Manipulation docs for others 
    var content = $("#" + id).html(); 
    $("table#jobs-failed").html(content); 
    // repeat for your other tables 
} 
$("#view").change(function (event) { 
    var $target = $(event.target); 
    var whatTheySelected = $target.val(); 
    if (whatTheySelected == case1) { 
    doSwap("content1"); 
    } else if (whatTheySelected == case2) ... 

如果沒有內容（你只需要與數據什麼的JS變量），你需要做的元素。而不是做：

var content = $("#" + id).html(); 

做：

var content = $("<tr><td>" + yourVar + "</td><td>" + yourVar2 +"</td></tr>"); 

希望有所幫助。

Answer 2

您是從JSON渲染客戶端上的表嗎？不是，那麼你需要更改的事件調用此：

$('#id_of_some_table_wrapper').load('view.php?view=' + $(this).val());