0

特定のラベルとスタイルを使用して、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」に入れる方法。テーブルを動的に作成する ajax を試してみましたが、事前に設計されている場合はデータを配置するための助けが得られませんでした。

4

2 に答える 2

1

あなたはこれを使うことができます$("table #id").text("Your text");

于 2012-10-18T07:00:01.913 に答える
0

さて、私はあなたに2つの答えを与えるつもりですが、個人的には最初の答えが好きです.

最初のソリューション:

このようなタスクを実行するために、多くのプラグインが利用可能です。私の個人的なお気に入りは: jTable

「jTable は、HTML や Javascript をコーディングせずに AJAX ベースの CRUD テーブルを作成するために使用される jQuery プラグインです。」

2番目の解決策:

次のようなテーブル構造があるとします。

<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 プラグインはそのような仕事をするための最良のソリューションです。

于 2012-10-18T07:06:23.973 に答える