Javascript CSS to load after another JS is done

Question

I have this Javascript that turns the color of a td table into a specific color according to the value inside it :

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

I am also using a push javascript to load those td's in a table:

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

How do you make the javascript css work for the appended tds?

Answer 1

You run it again. First, isolate it into its own function:

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

Then call that both from the ready handler and the ajax completion handler.

---

Side note: I would recommend not putting your background colors in the JavaScript code. Instead, ideally, put a class on the td elements when you're generating them that indicates what color they should be. If you can't do that for some reason, then adjust the code above to add the class based on content. Then at least the colors are in the CSS rather than the code.

Answer 2

you calling your css editing code in document.ready which is the first things gets executed and till that time td doesn't even exists.

you need to get the data first and create the table structure first before start editing the same.

do this way.

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