如何創建表格或從JSON格式追加？

Question

在使用ajax-jQuery處理一個小型搜索引擎並使用PHP函數後，我有一個數組JSON，並且我想處理這個表中的附加行，但是我感到困惑。

從查詢MySQL的JSON格式是好的，但我不知道如何處理數據生成表或附加在我的存在表。

我認爲這適用於每個JSON的每個元素，但我不能認爲。

注：我的JSON代碼是產生該這樣

 ........... 
     $jsonSearchResults = array(); 
       while ($row = mysql_fetch_assoc($result)) { 
        $jsonSearchResults[] = array(
         'clavemat' => $row['cve_mat'], 
         'tipomat' => $row['tipo_mat'], 
         'titulomat' => $row['titulo_mat'], 
         'autormat' => $row['autor_mat'], 
         'editmat' => $row['edit_mat'], 
         'success' => 'success' 
        ); 
       } 
     echo json_encode ($jsonSearchResults); 

表HTML

......... 
<table class="busqueda"> 
<tr> 
<th scope="col">Clave</th> 
<th scope="col">Tipo</th> 
<th scope="col">Título</th> 
<th scope="col">Autor</th> 
<th scope="col">Editorial</th> 
</tr> 
</table> 
........ 

JSON CODE

[ 
{ 
"clavemat":"LICOELMCUS", 
"tipomat":"Libro", 
"titulomat":"Contabilidad", 
"autormat":"Elias Flores", 
"editmat":"McGraw Hill", 
"success":"success" 
}, 
{ 
"clavemat":"LICUDEMCNU", 
"tipomat":"Libro", 
"titulomat":"Curso java", 
"autormat":"Deitel", 
"editmat":"McGraw Hill", 
"success":"success" 
}, 
{ 
"clavemat":"REECMUMUNU", 
"tipomat":"Revista", 
"titulomat":"Eclipses", 
"autormat":"Muy Interesante", 
"editmat":"Muy interesante", 
"success":"success" 
}, 
{ 
"clavemat":"TEPLPLTENU", 
"tipomat":"Tesis", 
"titulomat":"Platanito Show", 
"autormat":"Platanito", 
"editmat":"Telehit", 
"success":"success" 
} 
] 

AJAX.JQUERY FILE

$.ajax({ 
      type: "POST", 
      url: action, 
      data: dataSearch, 
      success: function (response) { 

       if (response[0].success == "success") { 
        alert("Si hay datos"); 
       } else { 
        alert("No hay datos"); 
       } 

      } 
     }); 
     return false; 
    }); 

Answer 1

這應該工作

$.each(response, function (index, record) { 
    var row = $("<tr />"); 
    $("<td />").text(record.clavemat).appendTo(row); 
    $("<td />").text(record.tipomat).appendTo(row); 
    $("<td />").text(record.titulomat).appendTo(row); 
    $("<td />").text(record.autormat).appendTo(row); 
    $("<td />").text(record.editmat).appendTo(row); 

    row.appendTo("table.busqueda"); 
}); 

上面的代碼行追加到現有的表用類 「busqueda」。

Answer 2

在你的表，你可以添加一個<tbody>元素作爲容器的動態行：

<table class="busqueda"> 
    <thead> 
    <tr> 
     <th scope="col">Clave</th> 
     <th scope="col">Tipo</th> 
     <th scope="col">Título</th> 
     <th scope="col">Autor</th> 
     <th scope="col">Editorial</th> 
    </tr> 
    </thead> 
    <tbody id="dynamic_rows"> 
    <!-- Ajax results go here --> 
    </tbody> 
</table> 

然後在阿賈克斯成功回調，你會令行：

if (response[0].success == "success") { 
    // Render dynamic rows here 
    var $dynamic_rows = $('#dynamic_rows'); 

    // clear out old rows 
    dynamic_rows.html(''); 

    /////// 
    // You can use the row building code from Rafael's answer here 
    // except append to $dynamic_rows 

} else { 
    alert("No hay datos"); 
}