Hi, How to change table row background colour?

Question

Hi, How to change table row background colour from same items in array?

Sachin Singh · Answer

for example on button click based on column value you can change row background with following jquery suppose you have array like var nums=["1","3"] and you want to change row color if any column of a row have 1 or 3 then do like below table id= "tblOrder" > Id Name Order Type 1 Gupta Traders Special 2 Shrikant Steel General 3 Payal Furniture Special table > "HighLight()" >Filter table id= "tblOrder" > Id Name Order Type 1 Gupta Traders Special 2 Shrikant Steel General 3 Payal Furniture Special table > function HighLight() { var Ids= [ "1" , "3" ]; debugger; $( "#tblOrder tr" ).each( function (i,y) { if( $(this).find( 'td' ).eq(i).text()==Ids[i]) { $(this).css( "background" , "yellow" ); } }); }

Sachin Singh · Answer

please elaborate what do you mean by changing background from same items in array?

Kiran Mohanty · Answer

Hi, If you are looking for alternate row color in a table , you can add below styles in your code. > html > head > title > Page Title title > style > tbody tr:nth-child(2n) {background-color: blue;} tbody tr:nth-child(2n+1) {background-color: red;} style > head > body > table > thead > tr > th > Id th > th > Name th > th > Place th > tr > thead > tbody > tr > td > 1 td > td > a td > td > abc td > tr > tr > td > 2 td > td > b td > td > bcd td > tr > tr > td > 3 td > td > c td > td > cde td > tr > tbody > table > body > html > Output

Harsh Shah · Answer

You can set the background color of the table row like this... HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 JS var arr = ["lightgreen", "orange", "red"]; var $rows = $('tr'); var nextRow = 0; $.each(arr, function(index, val) { for (var i = 0; i $rows.eq(nextRow++).css("background-color", val); } }); Output:

Hi, How to change table row background colour?

Answers (4)