JQuery:为表格行设置.html对我不起作用

时间:2011-08-29 23:35:12

标签: jquery

我从未参与过jquery,但经过一些谷歌搜索和学习后,我能够在我的应用程序中使用它。我正在尝试更新我的asp.net项目中的表行但是我无法通过使用我通过服务接收的新数据设置它的.html来更新表行。

我在后面的代码中预先填充表格,以生成行和颜色,并根据其中一个ID应用cssclass标签。浏览器上表的最终渲染htmml如下:

<table id="dataTable"> 
<tr class="Row1">   
<td>CC</td><td>0</td><td>0</td><td>0</td><td>1</td> 
</tr>
<tr class="Row2">   
<td>CC</td><td>0</td><td>0</td><td>0</td><td>2</td>   
</tr>
<tr class="Row3">   
<td>CC</td><td>0</td><td>0</td><td>0</td><td>3</td>   
</tr>  
</table> 

我尝试更新数据行的asp页面的代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Simple AJAX Service Client Page</title>    
</head>
<body>
    <form id="form1" runat="server">
      <asp:Table ID="dataTable" runat="server" />         
    </form>

    <script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.4.1.js") %>' ></script>
    <script src="~/scripts/jquery-1.4.1.js" type="text/javascript"></script> 

     <script language="javascript" type="text/javascript">

         jQuery.ajaxSetup({
             // Disable caching of AJAX responses              
             cache: false         
         });


         $(document).ready(function () { setTimeout("countdown()", 1000); }); 

         function countdown() {

             $.getJSON("http://localhost:8732/Service/GetStat", null, function (result) {
                 for (var key = 0, size = result.length; key < size; key++) {

                    var htmlstr =
                    '<td>'
                    + result[key].Name
                    + '</td><td>'
                    + result[key].Size
                    + '</td><td>'
                    + result[key].Count
                    + '</td><td>'
                    + result[key].Handle
                    + '</td><td>'
                    + result[key].ID
                    + '</td>';

                    $('.Row' + result[key].ID).html = htmlstr //id values are like 1, 2, 3.....
                 }
             });

             setTimeout("countdown()", 1000);
         };     
    </script>

</body>
</html>

当我使用Visual Studio调试代码时,通过设置断点,正在制定的html的值是正确的顺序(其中一个示例值如下<td>CC</td><td>18444289</td><td>6</td><td>248</td><td>1</td>)和调试时的变量值('.Row'+结果[key] .MonitorID)就像ROW1等......

那么为什么设置.html这对我不起作用。任何帮助非常感谢。

谢谢。

2 个答案:

答案 0 :(得分:3)

您使用的是html错误。这是一个功能......

$('.Row' + result[key].ID).html(htmlstr)

答案 1 :(得分:2)

尝试使用.empty.append,如下所示:

$('.Row' + result[key].ID).empty().append(htmlstr);