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');
            }
        })
       });

我也使用push 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元素生成它们时，将它们放在{{1}}元素上，以指示它们应该是什么颜色。如果由于某种原因无法执行此操作，请调整上面的代码以根据内容添加类。然后至少颜色在CSS而不是代码中。

Answer 2

你在document.ready中调用你的css编辑代码，这是第一个被执行的东西，直到那时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(''));
            }

            $('#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 CSS在另一个JS完成后加载

2 个答案: