在另一个 JS 完成后加载 Javascript CSS

Question

我有这个 Javascript 可以根据其中的值将 td 表的颜色转换为特定颜色:

$(document).ready(function () {
        $('#headerTbl td').each(function () {
            if (parseInt($(this).text(), 10) >= 0 && parseInt($(this).text(), 10) <= 69) {
                $(this).css('background-color', '#F15854');
            }
            else if (parseInt($(this).text(), 10) >= 70 && parseInt($(this).text(), 10) <= 89) {
                $(this).css('background-color', '#DECF3F');
            }
            else if (parseInt($(this).text(), 10) >= 90 && parseInt($(this).text(), 10) <= 100) {
                $(this).css('background-color', '#5DA5DA');
            }
        })
       });

我还使用推送 javascript 将这些 td 加载到表中:

 function getData() {

        var $tblpercent = $('#headerTbl');
        $.ajax({
            url: '../api/data',
            type: 'GET',
            datatype: 'json',
            success: function (data) {

                if (data.length > 0) {
                    $tbl.empty();

                    var rows2 = [];


                    for (var i = 0; i < data.length; i++) {
                        rows2.push('<td>' + data[i].percentage + '</td>');
                    }
                    $tblpercent.append(rows2.join(''));
                }
            }
        });
    };

如何让 javascript css 为附加的 tds 工作？

Answer 1

你再次运行它。首先，将其隔离成自己的功能:

function setBackgroundsOnCells() {
    $('#headerTbl td').each(function() {
        if (parseInt($(this).text(), 10) >= 0 && parseInt($(this).text(), 10) <= 69) {
            $(this).css('background-color', '#F15854');
        }
        else if (parseInt($(this).text(), 10) >= 70 && parseInt($(this).text(), 10) <= 89) {
            $(this).css('background-color', '#DECF3F');
        }
        else if (parseInt($(this).text(), 10) >= 90 && parseInt($(this).text(), 10) <= 100) {
            $(this).css('background-color', '#5DA5DA');
        }
    })
}

然后从 ready 处理程序和 ajax 完成处理程序调用它。

---

旁注:我建议不要将您的背景颜色放入 JavaScript 代码中。相反，理想情况下，在生成 td 元素时放置一个类来指示它们应该是什么颜色。如果由于某种原因您不能这样做，请调整上面的代码以根据内容添加类。那么至少颜色在 CSS 而不是代码中。