【问题标题】：Using jQuery .load to add rows to an html table使用 jQuery .load 向 html 表添加行
【发布时间】：2026-02-10 07:05:01
【问题描述】：

下面的代码将服务器中returndatafromdb2()函数返回的html添加到id为resultstable2的表中。函数returndatafromdb2()返回的html格式为：

"<tr><td>some text</td><td>more text</td></tr><tr><td>some text</td><td>more text</td></tr><tr><td>some text</td><td>more text</td></tr>"

正如您在代码中看到的，我使用来自 jquery 的 .load() 从服务器获取 html 并将其添加到表中。但是，我使用的代码替换了表中的现有行，而不是添加到表中。如何使用 jQuery .load() 函数将行添加到现有行而不是替换它们？

如果我能以某种方式将从.load() 函数接收到的html 分配给变量newhtml，我可以执行$(newhtmltext).appendTo('#resultstable2') 之类的操作。但是我不知道如何将.load()得到的html赋值给一个变量，或者作为字符串使用。

守则：

使用 jquery 创建表

<p>Method 2</p>

    <table id="resultstable2">
        <tr>
            <th>Grade</th>
            <th>Price</th>
        </tr>
    </table>

<button id="b2">Execute returndatafromdb2()</button>

<script type="text/javascript">

    $.ajaxSetup({
        cache: false
    });


    var getdata2 = function(){
        var loadurl2 = "{{=URL('default', 'returndatafromdb2')}}";
        $('#resultstable2').load(loadurl2));
    };

    $('#b2').click(getdata2);

</script>

【问题讨论】：

标签： jquery html ajax html-table

【解决方案1】：

load() 函数无法做到这一点。您将需要使用普通的 ajax 调用并编写自己的回调函数。像这样的：

var getdata2 = function() {

    var loadurl2 = "{{=URL('default', 'returndatafromdb2')}}";
    $.get(loadurl2,function(data){
        $('#resultstable2').append(data);   
    },'html');

};

$('#b2').click(getdata2);

【讨论】：

谢谢。我知道如何使用 $.get 和 $.post 来做到这一点。想知道负载是否可能。

【解决方案2】：

只需使用append 而不是load()

var getdata2 = function() { 
    var loadurl2 = "{{=URL('default', 'returndatafromdb2')}}";
    $.get(loadurl2,function(data){
        //Here goes the append :-)
        $('#resultstable2').append(data);   
    },'html');
};

$('#b2').click(getdata2);

【讨论】：

【解决方案3】：

jQuery.get( loadurl2 ,'', function(d){

$('#resultstable2').append(d);

} )

【讨论】：