更改动态生成的表格行背景颜色答案

【问题标题】：Change dynamically generated table row background color更改动态生成的表格行背景颜色
【发布时间】：2014-06-19 01:50:52
【问题描述】：

我需要能够像这样动态更改表格行背景颜色：

绿色，如果 acc.Amount

红色，如果 acc.Amount > acc.Balance

没有变化，如果 acc.Amount == acc.Balance

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax
        ({
            type: "GET",
            url: "/Account/Get/@ViewBag.AccountId",
            dataType: 'json',
            success: function(data) {
                $.each(data, function (i, acc)
                {
                    $('<tr>').append(
                        $('<td>').text(acc.Amount),
                        $('<td>').text(acc.Balance))
                        .appendTo('#myTable');
                });
            },
            error: function() {
                alert('Failed');
            }
        });
    });
</script>

如何注入表格行bg颜色？

【问题讨论】：

使用 css... 并更改 td 背景颜色。
@Mottie 你能建议一种方法来实现这一点吗？
先自己试试吧。然后展示你拥有什么以及你被困在哪里。这不是一个许愿工厂。
@ejay_francisco 我被困在这里。以上是我所能接受的。我不明白如何注入 bg 颜色。

标签： javascript jquery css formatting

【解决方案1】：

我已更新您的脚本以包含确定金额/余额相等性的逻辑，然后将内联样式或类（推荐）应用于您的表格行。

类方法需要你更新你的 CSS。

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax
        ({
            type: "GET",
            url: "/Account/Get/@ViewBag.AccountId",
            dataType: 'json',
            success: function(data) {
                $.each(data, function (i, acc)
                {
                    var amount = parseInt(acc.Amount, 10),   // parse in case string
                        balance = parseInt(acc.Balance, 10), // parse in case string
                        color = amount < balance ? 'green' : 
                                amount > balance ? 'red' :
                                '';

                    $('<tr>').append(
                        $('<td>').text(acc.Amount),
                        $('<td>').text(acc.Balance))

                        // I'm applying both an inline style and a class name
                        .css('background-color', color) // inline-style
                        .addClass(color) // adding class red/green

                        // continue code...
                        .appendTo('#myTable');
                });
            },
            error: function() {
                alert('Failed');
            }
        });
    });
</script>

【讨论】：

非常感谢！很好的答案！