locked
How to make function give row that have different value with color red to full row ? RRS feed

  • Question

  • User696604810 posted

    problem


    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 asp.net .

    I need to give color red to row have distinct value

    according to my case then second row and third row will be

    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 ?

    What I have tried:

    <!DOCTYPE html>
    <html>
    <body>
    <table border="1">
    <col width="500">
    <col width="500">
    <col width="500">
    <col width="500">
    <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>
    final result i need to reach
    https://www.mediafire.com/view/teckenzafkb5m2n/img_for_red_color_different.png/file

    Wednesday, February 5, 2020 7:53 PM

All replies

  • User-719153870 posted

    Hi ahmedbarbary,

    According to the description, what you are looking for is jQuery.each() function.

    You can refer to below demo to update your code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
        </style>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    $("#table1").find("tr").each(
                        function () {
                            var tds = $(this).find("td");
                            var value = tds.eq(0).text();
                            tds.each(
                                function () {
                                    if (this.innerText != value) {
                                        tds.css("color", "red");
                                        return false;
                                    }
                                }
                            )
                        }
                    )
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table border="1" id="table1">
                    <col width="500">
                    <col width="500">
                    <col width="500">
                    <col width="500">
                    <tr bgcolor="#6699FF" width="100%">
                        <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>
                <br />
                <input type="button" id="btn" value="Click Me" />
            </div>
        </form>
    </body>
    </html>

    Below is the result of this demo:

    Hope this could help.

    Best Regard,

    Yang Shen

    Thursday, February 6, 2020 3:29 AM