JS获取repeater列数据对比，小于则颜色为红色

Question

前台标签
<table  class="tablelist" width="100%" border="0" cellspacing="0" cellpadding="0" id="demoTable">
              <thead>
                  <tr>                  
                    <th scope="col" order="totalje" width="90px" nowrap>总金额</th>
                    <th scope="col" width="90px"nowrap >应收款</th>
                    <th scope="col" width="90px" nowrap>实收款</th>
                    <th scope="col" width="90px" nowrap>剩余款</th>
                    <th width="30px" nowrap><%=Resources.UI.BtnEdit%></th>       
                </tr>
              </thead>                
                 <tbody id="mainbody">
                     <asp:Repeater ID="rptList" runat="server"  EnableViewState="false">
                      <ItemTemplate>
                        <tr >
                            <td style="text-align:right"><%#(Container.DataItem as View_CompactCustomer).totalje.ToString("n2")%></td>
                            <%#ShowCompactJE(Eval("ID"))%>                         </tr>
                      </ItemTemplate>    
                      <FooterTemplate>
                                       <td colspan="5">本页合计</td>
                         <td  style="text-align:right"><%=totalje.ToString("n2")%></td>
                         <%#ShowCompactJE2()%>
                      </FooterTemplate>    
                      </FooterTemplate>                           
                  </asp:Repeater>
                  
                  <asp:Repeater ID="rptTotal" runat="server"  EnableViewState="false">
               
                      <ItemTemplate>
                      <tr >
                           <td colspan="5">总计</td>
                            <td  style="text-align:right"><%#ShowMoney(Eval("总金额"))%></td>
                            <%#ShowCompactJE3()%>
                            <td width="20px"></td>
                      </tr>
                      </ItemTemplate>
                  </asp:Repeater>            
                 </tbody>   
            </table>
后台代码ShowCompactJE2
方法：  public string ShowCompactJE(object id){
 DataTable dt = new View_htkxService().QueryInstance.GetDataTable("exec proc_htkx_CompactID " + id.ToString() + ",'" + hkstart + "'," + "'" + hkend + "'" + ",'" + ssstart + "'," + "'" + ssend + "'," + "'" + fpstart + "'," + "'" + fpend + "'" + ",'" + qdstart + "'," + "'" + qdend + "'," + "'" + qs + "'," + "'" + servicetype + "'");
    
            for (int i = 0; i < dt.Columns.Count; i++)
            {
                if (Cyberway.Common.Data.DAOCommon.DataTableHasRow(dt))
                {
                    if (i == 0)
                    {
                        try
                        {
                               ret = ret + "<td style='text-align:right'><a href=# onclick=\"OpenWindow('../Compact/CompactEdit4.aspx?action=edit&id=" + id.ToString() + "',650,400,false);return false;\">" + double.Parse(dt.Rows[0][i].ToString()).ToString("n2") + "</a></td>";
                            
                        }
                        catch (Exception ex)
                        {
                            ret = ret + "<td style='text-align:right'><a href=# onclick=\"OpenWindow('../Compact/CompactEdit4.aspx?action=edit&id=" + id.ToString() + "',650,400,false);return false;\">" + dt.Rows[0][i].ToString() + "</a></td>";                        }
                       
                    }
                    else
                    {
                        if (i == 1)
                        {
                            try
                            {
                                ret = ret + "<td style='text-align:right'><a href=# onclick=\"OpenWindow('../Compact/CompactEdit5.aspx?action=edit&id=" + id.ToString() + "',650,400,false);return false;\">" + double.Parse(dt.Rows[0][i].ToString()).ToString("n2") + "</a></td>";
                            }
                            catch (Exception ex)
                            {
                                ret = ret + "<td style='text-align:right'><a href=# onclick=\"OpenWindow('../Compact/CompactEdit5.aspx?action=edit&id=" + id.ToString() + "',650,400,false);return false;\">" + dt.Rows[0][i].ToString() + "</a></td>";                            }
                        }
                        else
                        {
                            try
                            {
                                ret = ret + "<td style='text-align:right'>" + double.Parse(dt.Rows[0][i].ToString()).ToString("n2") + "</td>";
                            }
                            catch (Exception ex)
                            {
                                ret = ret + "<td style='text-align:right'>" + dt.Rows[0][i].ToString() + "</td>";
                            }
                        }
                    }
                    try
                    {
                        total[0, i] = total[0, i] + double.Parse(dt.Rows[0][i].ToString());
                    }
                    catch (Exception ex)
                    { }
                }
                else
                {
                    ret = ret + "<td>" + "</td>";
                }
            }        }
        ret = ret + "</td>";
        return ret;
    }
Q:如何获取总金额，与  <%#ShowCompactJE2()%>
获得的4列数据中的其中一列应收款对比，如应收款小于则显示红色。不知道能否用JS实现..??

Answer 1

<script>
window.onload=function(){
   var money1 = document.getElementById("总金额").innerHTML;
   var money2 = document.getElementById("实收金额").innerHTML;
   if(parseInt(money1)>parseInt(money2))
   {
      document.getElementById("剩余金额").style.color="red"; 
   }   
}
</script>
<asp:Reapter>
  <ItemTemplate>
     <span id="总金额"><%# Eval("总金额")%></span>
     <span id="实收金额" ><%# Eval("实收金额")%></span>
     <span id="剩余金额"><%# Eval("剩余金额")</span>
  </ItemTemplate>
</asp:Reapter>

Answer 2

强烈同意，可以放Lable，判断数据源，然后加载。

Answer 3

1 写一段脚本放到你的repeater后面，用脚本遍历repeater，找到里面的两列，如果不一样，通过脚本的addClass加个样式。 这个样式你可以在前面定义好变成什么颜色。    
2 从后台绑定时改变颜色，可以给控件赋前台的html 如：ltr1.text="<span color='red'>不一致</span>"
  也可以通过后台改变前台控件的属性。如：label1.text="不一致". label1.Attribute.add("color","red")

Answer 4

总金额字段是用
 <td style="text-align:right"><%#(Container.DataItem as View_CompactCustomer).totalje.ToString("n2")%></td>
获取到，而后面的应收金额时候通过后台函数获取，现在就是没做过这种一个由Container获取到的值和后台函数dt的一个循环对比...有没有类似例子

Answer 5

js实现
得到第i行第j列的内容的方法。
document.getElementById("rptTotal").rows[i].cells[j].innerHTML至于比较哪一列，自己考虑吧

Answer 6

逻辑我知道，repeater 在源代码就是没掉，而只有TABLE ,TR ,TD，现在要的是从后台获取第一列“应收金额”的所有行逐一与前面字段“总金额”对比，如小于则应收字段显示红色，有相关的例子源码吗..

Answer 7

for(i=0;i<document.getElementById("rptTotal").rows.length;i++)
{
 x1 = document.getElementById("rptTotal").rows[i].cells[0].innerHTML
}这种方法。，
你的代码真够乱的啊。Repeater本身就生成了表格，你还怎么在后台"<tr>..."这样生成呢

Answer 8

你是想通过Ajax来对比，那么只需要获取服务端的“应收金额”数组，并用JS取得客户端的总金额，通过下标来对比并设置颜色如果是某个PostBack的动作后比较，那就把应收金额Post到服务端再比较，并设置颜色

Answer 9

document.getElementById("rptTotal").rows.length
repeater是变成table，因此获取不到ID repTotal 吧？