我希望根据通过 ASP.NET 从 GridView 出来的 html 表中的单元格值进行条件格式化答案

【问题标题】：I wish to do conditionally formatting according to values of cells inside a html table that comes out of a GridView via ASP.NET我希望根据通过 ASP.NET 从 GridView 出来的 html 表中的单元格值进行条件格式化
【发布时间】：2015-10-14 14:52:20
【问题描述】：

我有一个问题。我写的代码不起作用。请纠正我的错误。

这是整体问题。代码紧随其后。

我编写了一个 ASP.NET 脚本，它从多个外部 Excel 文件中检索数据并在 .aspx 页面上显示此代码。我希望根据“好/满意/坏”等含义规则有条件地格式化这些表格的内容。

每个表的规则不同。表1中“好”对应的单元格的值与表2中“好”对应的单元格的值不同
可以在 HTML 页面中根据它们的 ID （如“GridView1”等）来识别表格（来自源 ASP.NET 页面的 GridViews 控件的 ID 相同）。我看到浏览器拥有 ID。
```
.bad { background-color:red}
.satisfactory {background-color:yellow}
.good {background-color:green}
```

嵌入jQuery：

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

jQuery:

 <script type="text/javascript">
     $("document").load(function () {
            $("#GridView1 td").each(
                function () {
                    var score = $(this).text();
                    if (score <= 2000) {
                        $(this).addClass("good") ;
                    }
                    else if (score > 2000 && score <=3999) {
                        $(this).addClass("satisfactory");
                    } else if (score>= 4000) {
                        $(this).addClass("bad");
                    }
                });
        })
    </script>

GridView1 控件的 ASP.NET 定义中的代码示例，该控件将呈现为 HTML Table ID="GridView1"。这是Page.aspx的摘录

<div >
    <span class="labelPPMIntern" style="background-color:#66CCFF;">Score</span>
      <asp:GridView ID="GridView1" runat="server" Width="410px" CellPadding="4"  GridLines="Both">
        <AlternatingRowStyle BackColor="White" />
        <HeaderStyle BackColor="White" Font-Names="Arial" Font-Size="9pt" ForeColor="Black" Font-Bold="True" />
        <RowStyle Font-Names="Arial" Font-Size="8pt" HorizontalAlign="Center" BackColor="#66CCFF" />
    </asp:GridView></div>

我哪里错了？渲染我当前的代码后，Background-color 没有变化（因为它应该是根据对 s 的值的验证和类的分配。）

【问题讨论】：

我怀疑您的网格视图的 RowStyle 将样式内联在 html 上。内联样式将优先于您的课程。尝试删除行样式中的背景颜色，看看会发生什么。
我去掉了.aspx代码中行的内联格式，还是不行

标签： jquery html asp.net gridview

【解决方案1】：

.net 重命名 webform 对象的 ID 值，因此您的 gridview 声明需要 ClientIDMode="Static" 属性，否则您的 ID 类似于 ctl00_ContentPlaceHolder1_GridView1。

在我的代码中，我在代码隐藏中对 ItemDataBound 事件进行此类操作。

【讨论】：

我切换了 ClientIDMode="Static"，但仍然没有得到我想要的输出。事实上，似乎没有 jQuery 根本不起作用。（没有背景颜色变化）。一定还有别的东西。
谢谢你，安托万。我尝试了 RowDataBound 事件，但我遇到了一个问题，即在 aspx.cs 页面中输入此事件触发的函数后，只显示第一个表的第一行。您能否向我指出一个涉及 ItemDataBound 事件的可行解决方案？谢谢
我碰巧有一个 .net 项目，我用它进行了测试。
有没有可能 var score = $(this).text();对值不合法，而仅对文本？我的条件格式条件是指值比较
$(document).ready(function () {}) 或 function pageLoad(sender, args) {} 对我有用，但不适用于 $("document").load(function () { })

【解决方案2】：

我找到了解决方案。它是由多种原因引起的：

$("document").准备就绪(function ()...

谢谢约瑟夫·诺里斯。有一个不正确的事件处理程序的问题。我正在使用 $("document").load(function ()

$('#GridView1 tr>td').each(..

有一个问题是放置正确的 jQuery 选择器。我通过从一般到特殊过滤选择器来整理它。

这是工作代码：

  <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $("document").ready(function () {
        $('#GridView1 tr>td').each(

            function () {
                var score = parseFloat($(this).text());
                if (score <= 2000 && score>0) {
                    $(this).addClass("good");

                }
                else if (score > 2000 && score <=3999) {
                    $(this).addClass("satisfactory");
                } else if (score>= 4000 ) {
                    $(this).addClass("bad");
                }
            });
    });

</script>

【讨论】：