Click here to Skip to main content
15,034,432 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello all,

I have a function on keyup that filters a c# Gridview content on clientside - but what I want is to change the background color of each TR element so that even rows get one color and odd rows get another color.

The topmost filter function part works fine and my loop through the DIV works fine - but it comes to set the backgroundColor it does not do anything in the browser :-(

So how to change the background color of the TR tag?

I have tried so much now and googled so much until now - so thats why I kindly ask for help on this site.

So any help is appreciated.

Thanks in advance,
Michael

What I have tried:

$('#txtSearchTemplateName').on('keyup', function () {
    if ($('#txtSearchTemplateName').val().length > 2) {
        $("tr[data-filter]").hide();
        $("tr[data-filter*='" + $('#txtSearchTemplateName').val().toLowerCase() + "']").show();
    }
    else // If less than two characters, show all lines
        $("tr[data-filter]").show();

    var vDiv = document.getElementById("myDIV");
    for (i = 0; i <= vDiv.childElementCount - 1; i++) {
        if (vDiv.children[i].tagName === "TABLE") {
            var vTbl = vDiv.children[i];
            for (j = 0; j <= vTbl.childElementCount - 1; j++) {
                if (vTbl.children[j].tagName === "TBODY") {
                    var vBody = vTbl.children[j];
                    var vTRList = vBody.getElementsByTagName("TR");
                    for (k = 0; k <= vTRList.length - 1; k++) {
                        var element = vTRList[k];
                        var style = element.style;
                        style.backgroundColor = "#ff0000";
                        element.style = style;
                    }
                }
            }
        }
    }
});
Posted
Updated 13-Jul-21 5:52am
v2

1 solution

After your code runs, use the browser's inspector to select any part of the row and see where it's getting its background colour from. My bet is from the TD element(s) within the TR. If you want to be clunky about it, you might get away with setting the background colour to #ff0000 !important but it's probably worth setting the TD (or whatever element in the TD is providing the background colour) properly.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900