使用jQuery .load将行添加到html表中 [英] Using jQuery .load to add rows to an html table

问题描述

下面的代码将服务器中的 returndatafromdb2（）函数返回的 html 添加到具有id的表中 resultstable2 。函数 returndatafromdb2（）返回的html格式如下：

 < tr>< td>一些文字< / td>< td>更多文字< / td>< / tr>< tr>< td>一些文字< / td>< td>更多文字< / td>< / tr>< tr>< td>一些文字< / td>< td>更多文字< / td>< / tr> 
  

正如您在代码中看到的，我使用 .load（）从jquery中获取服务器的 html 并将其添加到表中。但是，我正在使用的代码会替换表中的现有行而不是添加到该表中。我如何使用jQuery .load（）函数将行添加到现有行而不是替换它们？如果我可以以某种方式将从 .load（）函数接收到的html分配给变量say newhtml ，我可以做一些像 $（newhtmltext）.appendTo（'＃resultstable2'）。但我不知道如何将 .load（）获得的html分配给一个变量，或者将它用作字符串。

代码：

使用jquery创建表

 < p>方法2< / p> 
 
< table id =resultstable2> 
< tr> 
等级< / th> 
 Price< th> 
< / tr> 
< / table> 
 
< button id =b2>执行returndatafromdb2（）< / button> 
 
< script type =text / javascript> 
 
 $ .ajaxSetup（{
 cache：false 
}）; 
 
 $ b $ var getdata2 = function（）{
 var loadurl2 ={{= URL（'default'，'returndatafromdb2'）}}; 
 $（'＃resultstable2'）。load（loadurl2））; 
}; 
 
 $（'＃b2'）。click（getdata2）; 
 
< / script> 
  

解决方案

没有办法用 load（）函数。您将需要使用正常的ajax调用并编写自己的回调函数。像这样：

  var getdata2 = function（）{
 
 var loadurl2 ={{= URL（'default'，'returndatafromdb2'）}}; 
 $ .get（loadurl2，function（data）{
 $（'＃resultstable2'）。append（data）; 
}，'html'）; 
 
}; 
 
 $（'＃b2'）。click（getdata2）; 
  

The code below adds the html returned by returndatafromdb2() function in the server to the table that has id resultstable2. The html returned by the function returndatafromdb2() is of the form:

"<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>"

As you can see in the code I am using .load() from jquery to obtain the html from the server and add it to the table. The code I am using, however, replaces the existing rows in the table instead of adding to it. How can I use jQuery .load() function to add the rows to existing rows and not replace them?

If I can somehow assign the html received from the .load() function to a variable say newhtml, I can do something like $(newhtmltext).appendTo('#resultstable2'). But I don't know how to assign the html obtained by .load() to a variable, or to use it as a string.

The Code:

Create table using 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>

解决方案

There isn't a way to do it with the load() function. You will want to use the normal ajax calls and write your own callback function. Something like this:

var getdata2 = function() {

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

};

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

这篇关于使用jQuery .load将行添加到html表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！