Mvc4 How to Compare Table Collumn and change Background color of cell using jquery

Introduction : This Tutorial explain how to change the backgroung color of table collumn by comparing to another collumn of table using the mvc4 web application. here we can bind the data from the sql database using ajax and display in table.

Tools : Visual Studio 2012 and SQL Server 2008.

Snapshot :

Now we can implement the code of above snapshot as below code.

Step 1: Create the mvc4 web application and database table.

Step 2: Now you create ado.net entity data Model as following

Step 3: Now you can add controller first you can add action method gettable() this method is also get method and then add post method and give name GetUser() .

public ActionResult gettable()
        {
            return View();
        }

public JsonResult GetUser()
        {
            List<tbl_user> D = new List<tbl_user>();
            using (Database1Entities2 dc = new Database1Entities2())
            {
                D = dc.tbl_user.ToList();
            }
            return new JsonResult { Data = D, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

Step 4 : Now you can bind the html table using the ajax you can call the controller and bind the in simple html table and see how to compare two collumn data and get defference between them and change background color.

Add view and give name gettable

@section Scripts{

    <script>
        $(document).ready(function () {
            $("#btnUser").click(function () {
                $.ajax({
                    url: '@Url.Action("GetUser","ABC")',
                    data: "",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        loadData(data);
                    },
                    error: function () {
                        alert("Failed! Please try again.");
                    }
                });
            });
            function loadData(data) {
                var tab = $('<table id="myTable"></table>');
                var thead = $('<thead></thead>');
                thead.append('<th> ID</th>');
                thead.append('<th>Name</th>');
                thead.append('<th>City</th>');
               // thead.append('<th>Education </th>');
                tab.append(thead);
                $.each(data, function (i, val) {
                    var trow = $('<tr></tr>');
                    trow.append('<td>' + val.Id + '</td>');
                    trow.append('<td>' + val.Name + '</td>');
                    trow.append('<td>' + val.City + '</td>');
                    trow.append('<td>' + val.Education + '</td>');
                    tab.append(trow);

                });
                $('thead tr:nth-child(4)').hide();
               //$("tr:odd", tab).css('background-color', '#C4C4C4');

                $("tr", tab).each(function () {
                    var cell3 = parseInt($(this).find("td:nth-child(3)").text());
                    var cell4 = parseInt($(this).find("td:nth-child(4)").text());
                   // $(this).find("td:nth-child(4)").hide();
                   // var deff = cell3 - cell4;
                    if (cell3 > cell4) {
                        $(this).find("td:nth-child(3)").css({ "background-color": "yellow" });
                    }
                    else if (cell3 < cell4) {
                        $(this).find("td:nth-child(3)").css({ "background-color": "red" });
                    }
                    else if (cell3 == cell4) {
                        $(this).find("td:nth-child(3)").css({ "background-color": "green" });
                    }
                    else {
                        $(this).find("td:nth-child(3)").css({"background-color":"white"})
                    }
                });
                $("#DivId").html(tab);
            };
        });
    </script>
}
    <table>
        <tr>
            <td>
                <input type="button" value="Get User" id="btnUser" />
            </td>
        </tr>
        <tr>
            <td>
                <div id="DivId">
                </div>
            </td>
        </tr>
    </table>

In above code expalin how to compare collumn and change the color of collumn.

here,    $(this).find("td:nth-child(n)"    // use to find nth cell of the table collumn

         and   $("tr", tab).each(function () // can iterate the loop through row and find nth number of collumn

If you have any query or help reguarding the above code feel free to contact or comment below.

codelearne

Mvc4 How to Compare Table Collumn and change Background color of cell using jquery