Hi, How to change table row background colour?

Karthikraja

5y899Java

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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Kiran Mohanty5y ago
Hi, If you are looking for alternate row color in a table , you can add below styles in your code.
>
<html>
<head>
<title>Page Titletitle>
<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>Idth>
            <th>Nameth>
            <th>Placeth>
        tr>
        thead>
        <tbody>
        <tr>
            <td>1td>
            <td>atd>
            <td>abctd>
        tr>
        <tr>
            <td>2td>
            <td>btd>
            <td>bcdtd>
        tr>
        <tr>
            <td>3td>
            <td>ctd>
            <td>cdetd>
        tr>
       tbody>
    table>

body>
html>
Output
+1
Harsh Shah5y ago
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 < index + 1; i++) {
$rows.eq(nextRow++).css("background-color", val);
}
});
Output:
+1
Sachin Singh5y ago
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>
+2
Sachin Singh5y ago
please elaborate what do you mean by changing background from same items in array?
+1

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

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

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