Javascript jqueryajax填充html表

如果我有一张桌子：

<table>
    <thead>
        <tr>Col1</tr>
        <tr>Col2</tr>
        <tr>Col3</tr>
    </thead>
    <tbody>
    </tbody>
</table>

可乐
可乐
可乐

使用jqueryajax将包含数据库数据的tr元素填充到tbody中的最快、最有效的方法是什么。（除非你有更好的方法）

从Web服务返回html代码，还是用Javascript动态创建html代码

此外，我还必须支持用户“向下钻取”，即单击>或双击行以打开窗格以显示更多信息。（包括另一个表和由单独的Web服务返回的一些详细信息）

---

欢迎所有想法！

从Web服务返回HTML会将您的代码紧密地结合在一起。这两种方法中最好的一种是使用Javascript创建HTML。

除非您需要创建数千行，否则性能不是一个问题。在何处生成标记实际上是一个设计决策。您可以生成标记：

• 服务器端，使用您选择的模板语言（ASP.NET、PHP、JSP、Django模板…）或
• 客户端，使用JavaScript模板（，…）

客户端将（理论上）减少服务器上的负载，但这也可能不是一个相关问题。无论您选择哪种风格，您都应该在整个应用程序中始终如一地使用它，除非有真正令人信服的理由这样做。

您可以使用jQuery.ajax（）调用返回JSON对象中的数据，并使用.tmpl（）模板插件来呈现html

您可以在此处查看模板文档：

---

更新：我发布了一个示例，作为对我在使用jQuery和AJAX的大型企业门户网站上工作的回答。我已经实现了和，以促进这一点。下面是一些示例代码：

Javascript（数据提供者）：Data.Lists.js

myorg.data.list.GetListItems ({
    webURL: "http://our.awesome.portal.com/Lists",
    listName: "Projects List",
    caml: caml,
    CAMLRowLimit: 6,
    callback: function(data) {
        var list = {};
        //code here that formats some data before binding
        list.items = data;
        var templateHtml = $('.ptMyProjects').html()
        .replace("<!--", "").replace("-->","");
        var html = $.tmpl(templateHtml, list);
        $('.ptMyProjects').html(html);
        //make sortable table
        $('.ptMyProjects .tablesorter').tablesorter({
            sortList: [[0,0]],
            headers: {3: {sorter: false}},
            widgets: ['zebra']
        });
        //class last row
        $('.ptMyProjects .tablesorter thead th').last().addClass('last');
        //add hover effect
        $('.ptMyProjects .tablesorter tbody tr, .tablesorter thead .header').hover(function(){
            $(this).addClass('hover');
        }, function(){
            $(this).removeClass('hover');
        });
        //add tooltips
        $('.ptMyProjects .vg_icon').tipsy({gravity: 's'});
    }
});

<div class="ptMyProjects ptTemplate">
    <!--
    <table class="tablesorter" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr class="gradient_gray">
                <th>Title</th>
                <th>Status</th>
                <th style="border-right: none;">Progress</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {{if items.length > 0}}
            {{each items}}
                <tr class='item' recordid="${ows_ID}">
                    <td ><a class='{{if ows_Critical_x0020_Project == "1"}}critical{{/if}}' href="${DisplayURL}">${ows_Title}</a> </td>
                    <td class="status">
                        <a href="#" class="pstatus">${ows_ProjStatus}</a>
                        <div style='display: none;'>
                            {{if ows_ProjComments}}
                                <div style="padding-bottom: 10px;">${ows_ProjComments}</div>
                            {{/if}}
                            <div style="font-weight: bold;">Lasted Edited By ${Editor}</div>
                            <div style="font-style: italic;">${when}</div>
                        </div>
                    </td>
                    <td>
                    <div class="ui-widget-default">
                        <div class="progressbar" value="${ows_PercentComplete}" style="height:100%;"></div>
                    </div>
                    </td>
                    <td class="actions">
                        {{if ows_ProjStatus != "Completed"}}<a href="#" class="vg_icon tick" title="Mark Completed"></a>{{/if}}
                        <a href="${EditURL}" class="vg_icon pencil" title="Edit"></a>
                        <a href="#" class="vg_icon comment" title="Comments"></a>
                    </td>
                </tr>
            {{/each}}
        {{else}}
            <tr><td colspan="4">You have no projects.</td></tr>
        {{/if}}
        </tbody>
    </table>
-->
</div>

myorg.data.list.GetListItems({
网址：“http://our.awesome.portal.com/Lists",
listName：“项目列表”，
caml:caml，
CAMLRowLimit:6，
回调：函数（数据）{
var list={}；
//在绑定之前格式化一些数据的代码
list.items=数据；
var templateHtml=$（'.ptMyProjects'）.html（）
.替换（“，”）；
var html=$.tmpl（templateHtml，list）；
$（'.ptMyProjects'）.html（html）；
//整理桌子
$（'.ptMyProjects.tablesorter'）.tablesorter({
排序列表：[[0,0]]，
标题：{3:{sorter:false}}，
小部件：[“斑马”]
});
//最后一排上课
$（'.ptMyProjects.tablesorter thead th'）.last（）.addClass（'last'）；
//添加悬停效果
$（'.ptMyProjects.tablesorter tbody tr、.tablesorter thead.header'）.hover（函数（）{
$（this.addClass（'hover'）；
}，函数（）{
$（this.removeClass（'hover'）；
});
//添加工具提示
$（'.ptMyProjects.vg_icon'）.tipsy（{gravity:'s'}）；
}
});

HTML（模板）

myorg.data.list.GetListItems ({
    webURL: "http://our.awesome.portal.com/Lists",
    listName: "Projects List",
    caml: caml,
    CAMLRowLimit: 6,
    callback: function(data) {
        var list = {};
        //code here that formats some data before binding
        list.items = data;
        var templateHtml = $('.ptMyProjects').html()
        .replace("<!--", "").replace("-->","");
        var html = $.tmpl(templateHtml, list);
        $('.ptMyProjects').html(html);
        //make sortable table
        $('.ptMyProjects .tablesorter').tablesorter({
            sortList: [[0,0]],
            headers: {3: {sorter: false}},
            widgets: ['zebra']
        });
        //class last row
        $('.ptMyProjects .tablesorter thead th').last().addClass('last');
        //add hover effect
        $('.ptMyProjects .tablesorter tbody tr, .tablesorter thead .header').hover(function(){
            $(this).addClass('hover');
        }, function(){
            $(this).removeClass('hover');
        });
        //add tooltips
        $('.ptMyProjects .vg_icon').tipsy({gravity: 's'});
    }
});

<div class="ptMyProjects ptTemplate">
    <!--
    <table class="tablesorter" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr class="gradient_gray">
                <th>Title</th>
                <th>Status</th>
                <th style="border-right: none;">Progress</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {{if items.length > 0}}
            {{each items}}
                <tr class='item' recordid="${ows_ID}">
                    <td ><a class='{{if ows_Critical_x0020_Project == "1"}}critical{{/if}}' href="${DisplayURL}">${ows_Title}</a> </td>
                    <td class="status">
                        <a href="#" class="pstatus">${ows_ProjStatus}</a>
                        <div style='display: none;'>
                            {{if ows_ProjComments}}
                                <div style="padding-bottom: 10px;">${ows_ProjComments}</div>
                            {{/if}}
                            <div style="font-weight: bold;">Lasted Edited By ${Editor}</div>
                            <div style="font-style: italic;">${when}</div>
                        </div>
                    </td>
                    <td>
                    <div class="ui-widget-default">
                        <div class="progressbar" value="${ows_PercentComplete}" style="height:100%;"></div>
                    </div>
                    </td>
                    <td class="actions">
                        {{if ows_ProjStatus != "Completed"}}<a href="#" class="vg_icon tick" title="Mark Completed"></a>{{/if}}
                        <a href="${EditURL}" class="vg_icon pencil" title="Edit"></a>
                        <a href="#" class="vg_icon comment" title="Comments"></a>
                    </td>
                </tr>
            {{/each}}
        {{else}}
            <tr><td colspan="4">You have no projects.</td></tr>
        {{/if}}
        </tbody>
    </table>
-->
</div>

---

这个解决方案对我来说非常有效

我只是从AJAX PHP调用中检索一个二维JSONed数组。
（使用php函数json_encode（））

然后简单地迭代数组以构造可插入的表行

$.post("./pdo_select.php", {post_query : view_q }, function(data) {
            var textToInsert = '';
            $.each(data, function(row, rowdata) {
               textToInsert += '<tr>';
               $.each(rowdata, function (ele, eledata){
                  textToInsert  += '<td>' + eledata + '</td>';
               });
               textToInsert += '</tr>';
            });
            $("#questions_table").append(textToInsert);

}, 'json'); 

$.post（“./pdo_select.php）”，{post_query:view_q}，函数（数据）{
var textToInsert=''；
$.each（数据，函数（行，行数据）{
textToInsert+=''；
$.each（行数据，函数（ele，eledata）{
textToInsert+=''+eledata+''；
});
textToInsert+=''；
});
$（“#问题表”）。追加（textToInsert）；
}“json”）；

请注意附加的“json”参数

使用标准jQuery可以轻松地操作整个表， 通过添加标题行，将一个或多个行或表转换为输入字段

如果您不想，我想您不必使用PDO例程从数据库中获取详细信息

下面是使用上面列出的技术构造的表的图像

---

你是如何得出这个结论的？ajax调用可能会返回HTML数据。@Matt Ball-我的操作假设是将标记放在Web服务中不是最好的方法。你是对的，我的说法是误导性的。我应该澄清一下。@Squidscare:服务器不知道它是否是ajax调用。都是HTTP，宝贝。@kralco：只要尽量减少DOM操作的数量，这没什么大不了的。你可以构建一个大的HTML字符串并插入一次，而不是单独插入每一行—性能要好得多。我同意，发出HTML标记的web服务完全是错误的，因为它不支持好的。我宁愿有一个不支持好的web服务hat返回JSON，这样就可以很容易地对其进行操作，以适应随时间变化的任何设计要求。您始终可以实现一个客户端机制，逐步加载数据。我建议使用jquery模板插件将数据插入表中。我不喜欢它，但如果它更快，我会这样做……我只是担心JavaScript可能太慢了。我知道Jquery/javascript代码在回调函数中做了什么。但是，

Data.Lists.js

和

GetListItems

是什么东西？顺便说一句，使用表排序器无法获得类似excel的过滤，是吗？同时扩展表以便显示详细信息也很困难nk？为详细信息添加另一行会打乱排序……我创建了一个包装器类，用于合并我们的

$.ajax

调用。这很好，因为我们可以在一个位置更新数据层。例如，jQuery在最新版本中彻底检查了整个

$.ajax

命名空间，而不是更改所有ajax调用在整个网站上，我们刚刚更新了数据类文件：）我们的数据类的结构如下：

dat