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

时间:2012-08-08 15:42:28

标签: jquery html ajax html-table

下面的代码将服务器中html函数返回的returndatafromdb2()添加到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>

3 个答案:

答案 0 :(得分:3)

使用load()功能无法做到这一点。您将需要使用正常的ajax调用并编写自己的回调函数。像这样:

var getdata2 = function() {

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

};

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

答案 1 :(得分:1)

只需使用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);

答案 2 :(得分:0)

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

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

} )