jquery - 使用 jQuery .load 将行添加到 html 表

Question

下面的代码将服务器中 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>

Answer 1

没有办法使用 load() 函数来做到这一点。您将需要使用普通的 ajax 调用并编写自己的回调函数。像这样的事情:

var getdata2 = function() {

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

};

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