Set HTML Table row color based on condition in jQuery

ahmedsa

SOLVED CLOSED ACTIVE ANSWERED
User: ahmedsa
Posted: on Feb 06, 2020 04:28 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 20688
Sample Code: Download

How to make row that have different value with color red font to full row ?

I have html dynamic table not static meaning i dont know how many rows or column inside table because it changed based on data show from back end.

I need to give color red to row have distinct value

according to my case then second row and third row will have font red and first row will not be change color.

First row have similar value as 12 on all td so that color will not change.

But second row have distinct value or different value 15 so that will be red font to full row completely.

third row have distinct value or different value as 17,15,13,12 so that third row completely will have red font.

meaning if I have one value or more different value from each other on same row then full row or all td on tr will be change font to red.

Actually i need function jquery or javascript give row that have different value with color red to full row?

can you please help me on that?

<html>
<body>
    <table border="1">
        <tr bgcolor="#6699FF" width="100%">
            <th>Part1</th>
            <th>Part2</th>
            <th>Part3</th>
            <th>Part4</th>
        <tr>
            <td>12</td>
            <td>12</td>
            <td>12</td>
            <td>12</td>
        </tr>
        <tr>
            <td>12</td>
            <td>15</td>
            <td>12</td>
            <td>12</td>
        </tr>
        <tr>
            <td>17</td>
            <td>15</td>
            <td>13</td>
            <td>12</td>
        </tr>
    </table>
    <button id="button">Click Me</button>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

arunkurm...

0 2

Reply
ANSWER
User: arunkurmi
Replied: on Feb 06, 2020 07:34 AM
Modified: on Feb 06, 2020 07:37 AM
Report

Hi ahmedsa,

Check this sample. now take its reference.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function () {
            var tableRows = $("#table1 tr:not(:has(th))");
            var tds = $(this).find('td');
            tableRows.each(function () {
                for (var i = 0; i < $(this).find('td').length - 1; i++) {
                    for (var j = 1; j < $(this).find('td').length; j++) {
                        if ($(this).find('td').eq(i).html() != $(this).find('td').eq(j).html()) {
                            $(this).find('td').css('background-color', 'red');
                            break;
                        }
                        else {
                            $(this).find('td').css('background-color', 'white');
                        }
                    }
                }
            });
        });
    </script>
    <form id="form1" runat="server">
    <div>
        <table id="table1">
            <tr>
                <th>Part1</th>
                <th>Part2</th>
                <th>Part3</th>
                <th>Part4</th>
            </tr>
            <tr>
                <td>12</td>
                <td>12</td>
                <td>12</td>
                <td>12</td>
            </tr>
            <tr>
                <td>12</td>
                <td>15</td>
                <td>12</td>
                <td>12</td>
            </tr>
            <tr>
                <td>17</td>
                <td>15</td>
                <td>13</td>
                <td>12</td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Set HTML Table row color based on condition in jQuery

Company

Explore

Follow us

Contact Us