使用Ajax填充表的列

Question

我在具有特定標籤和樣式的HTML表格佈局。我需要使用每行/元素的特定元素「id」更新我的表格，並使用ajax來填充數據。需要解決方案/建議。

<table border="0" style="margin-left:2%; margin-top:2%; "> 
      <tr> 
      <td align="left">Serial Number</td><td id="serialno"></td> 
      </tr> 
      <tr> 
      <td>MaterialDesign</td><td></td> 
      </tr> 
      <tr> 
      <td>TypeCode</td><td></td> 
      </tr> 
    </table> 

如何使用ajax獲取數據並放入「serialno」中。正如我曾嘗試過使用dyanamically創建表的Ajax，但如果它是預先設計的，則無法獲得幫助。

Answer 1

您可以使用此$("table #id").text("Your text");

Answer 2

好了，我要去給你兩個答案，但我個人比較喜歡第一個。

第一個解決方案：

大量的插件都可用做這樣的工作。我個人最喜歡的是：jTable

「 JTable的是使用沒有編碼的HTML或JavaScript來創建基於AJAX CRUD桌的jQuery插件」

第二個解決方案：

比方說，我們有一個表的結構是這樣的：

<table cellspacing="1" class="tablesorter">    
    <thead>> 
     <tr> 
      <th>first name</th> 
      <th>last name</th> 
      <th>age</th> 
      <th>total</th> 
      <th>discount</th> 
      <th>date</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>peter</td> 
      <td>parker</td> 
      <td>28</td> 
      <td>$9.99</td> 
      <td>20%</td> 
      <td>jul 6, 2006 8:14 am</td> 
     </tr> 
     <tr> 
      <td>john</td> 
      <td>hood</td> 
      <td>33</td> 
      <td>$19.99</td> 
      <td>25%</td> 
      <td>dec 10, 2002 5:14 am</td> 
     </tr> 
     <tr> 
      <td>clark</td> 
      <td>kent</td> 
      <td>18</td> 
      <td>$15.89</td> 
      <td>44%</td> 
      <td>jan 12, 2003 11:14 am</td> 
     </tr> 
     <tr> 
      <td>bruce</td> 
      <td>almighty</td> 
      <td>45</td> 
      <td>$153.19</td> 
      <td>44%</td> 
      <td>jan 18, 2001 9:12 am</td> 
     </tr> 
     <tr> 
      <td>bruce</td> 
      <td>evans</td> 
      <td>22</td> 
      <td>$13.19</td> 
      <td>11%</td> 
      <td>jan 18, 2007 9:12 am</td> 
     </tr> 
    </tbody> 
</table><a href="#" id="ajax-append">append new table data</a><br><br> 

現在我們可以做到這一點，以獲得數據，因爲我們希望它：

$(document).ready(function() { 
    $("table").tablesorter(); 
    $("#ajax-append").click(function() { 
     $.get("assets/ajax-content.html", function(html) { 
      // append the "ajax'd" data to the table body 
      $("table tbody").append(html); 
      // let the plugin know that we made a update 
      $("table").trigger("update"); 
      // set sorting column and direction, this will sort on the first and third column 
      var sorting = [[2,1],[0,0]]; 
      // sort on the first column 
      $("table").trigger("sorton",[sorting]); 
     }); 
     return false; 
    }); 
});   

這是一個表格分類應用程序，我已經應用了幾次，但仍然是jTable插件是最好的解決方案做這樣的工作。