Change Webgrid row color with jQuery

Hi Experts

I need to change the text or background colour of a webgrid row based on the value of one of the cell values in that row

I understand that jQuery is the only way to do this but having never used jQuery before have failed in finding a solution

Does someone please have a solution or example?

Many Thanks
LVL 2
PNRTAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Can you post the HTML for your WebGrid.
PNRTAuthor Commented:
Many Thanks for the reply

This is the css and code for the webgrid.   I need to change the backcolour of the last row
different if the value for Dist_Urgent_Order is True.


    <style type="text/css">
    .webgrid-table
    {
        font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
        font-size: 1.0em;
        width: 100%;
        display: table;
        border-collapse: separate;
        border: solid 1px #000;
        background-color: #f3e6e6;
    }
    .webgrid-table td, th
    {
        border: 1px solid #000;
        padding: 3px 7px 2px;
    }
    .webgrid-header
    {
        background-color: #60abc0;
        color: #FFFFFF;
        padding-bottom: 4px;
        padding-top: 5px;
        text-align: left;
    }
    .webgrid-footer
    {
    }
    .webgrid-row-style
    {
        padding: 3px 7px 2px;
    }
    .webgrid-alternating-row
    {
        background-color: #E6E6E6;
        padding: 3px 7px 2px;
    }
</style>


@grid.GetHtml(
tableStyle:= "webgrid-table",
headerStyle:= "webgrid-header",
footerStyle:= "webgrid-footer",
alternatingRowStyle:= "webgrid-alternating-row",
selectedRowStyle:= "webgrid-selected-row",
    columns:= grid.Columns(
        grid.Column("", format:=@@<text>@item.GetSelectLink("View")</text>),
        grid.Column("Dist_Name", "Distributor Name"), _
        grid.Column("Dist_Retailer_Name", "Retailer Name"), _
        grid.column("Dist_Date", "Order Date"), _
        grid.Column("Dist_Urgent_Order", "Is Urgent Order") ))
Julian HansenCommented:
Can you post the HTML - not the code - we need to see how this is rendered.

Do a view source from in the web browser, cut and paste the html for the rendered grid.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

PNRTAuthor Commented:
Apologies - hope this helps - from the webpage
This is originally from a webmatrix template

<html> 
<body>

    <style type="text/css">
    .webgrid-table
    {
        font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
        font-size: 1.0em;
        width: 100%;
        display: table;
        border-collapse: separate;
        border: solid 1px #000;
        background-color: #f3e6e6;
    }
    .webgrid-table td, th
    {
        border: 1px solid #000;
        padding: 3px 7px 2px;
    }
    .webgrid-header
    {
        background-color: #60abc0;
        color: #FFFFFF;
        padding-bottom: 4px;
        padding-top: 5px;
        text-align: left;
    }
    .webgrid-footer
    {
    }
    .webgrid-row-style
    {
        padding: 3px 7px 2px;
    }
    .webgrid-alternating-row
    {
        background-color: #E6E6E6;
        padding: 3px 7px 2px;
    }
</style>

 <div> 
<br>

<script>
function DoGrid()
{
}
</script>


        <script type="text/javascript">
        (function($) {
            $.fn.swhgLoad = function(url, containerId, callback) {
                url = url + (url.indexOf('?') == -1 ? '?' : '&') + '__swhg=' + new Date().getTime();

                $('<div/>').load(url + ' ' + containerId, function(data, status, xhr) {
                    $(containerId).replaceWith($(this).html());
                    if (typeof(callback) === 'function') {
                        callback.apply(this, arguments);
                    }
                });
                return this;
            }

            $(function() {
                $('table[data-swhgajax="true"],span[data-swhgajax="true"]').each(function() {
                    var self = $(this);
                    var containerId = '#' + self.data('swhgcontainer');
                    var callback = getFunction(self.data('swhgcallback'));

                    $(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function() {
                        $(containerId).swhgLoad($(this).attr('href'), containerId, callback);
                        return false;
                    });
                })
            });

            function getFunction(code, argNames) {
                argNames = argNames || [];
                var fn = window, parts = (code || "").split(".");
                while (fn && parts.length) {
                    fn = fn[parts.shift()];
                }
                if (typeof (fn) === "function") {
                    return fn;
                }
                argNames.push(code);
                return Function.constructor.apply(null, argNames);
            }
        })(jQuery);
        </script>
    <table class="webgrid-table" data-swhgajax="true" data-swhgcontainer="agrid" data-swhgcallback="">
    <thead>
        <tr class="webgrid-header">
            <th scope="col">
            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Cgrid/?SortColumn=Dist_Code&amp;SortOrder=ASC">Distributor Code</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Cgrid/?SortColumn=Dist_Name&amp;SortOrder=ASC">Distributor Name</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Cgrid/?SortColumn=Dist_Retailer_Code&amp;SortOrder=ASC">Retailer Code</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Cgrid/?SortColumn=Dist_Retailer_Name&amp;SortOrder=ASC">Retailer Name</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Cgrid/?SortColumn=Dist_Date&amp;SortOrder=ASC">Order Date</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Cgrid/?SortColumn=Dist_PO_Nmbr&amp;SortOrder=ASC">PO Number</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Cgrid/?SortColumn=Dist_Total_Val&amp;SortOrder=ASC">Total Value</a>            </th>
            <th scope="col">
<a data-swhglnk="true" href="/Cgrid/?SortColumn=Dist_Urgent_Order&amp;SortOrder=ASC">Is Urgent Order</a>            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a data-swhglnk="true" href="/Cgrid/?SelectedRow=1">View</a></td>
            <td>12345</td>
            <td>Fred</td>
            <td>12345</td>
            <td>Shop</td>
            <td>15/06/15 12:00:00 AM</td>
            <td>2345</td>
            <td>5353.37</td>
            <td>True</td>
        </tr>
        <tr class="webgrid-alternating-row">
            <td><a data-swhglnk="true" href="/Cgrid/?SelectedRow=2">View</a></td>
            <td>12345</td>
            <td>Fred</td>
            <td>12345</td>
            <td>Shop</td>
            <td>15/06/15 12:00:00 AM</td>
            <td>656456</td>
            <td>3456</td>
            <td>False</td>
        </tr>
    </tbody>
    </table>

</div> 

<script>
    function GetSelectLink() {
        text: String: IHtmlString;
    }
</script>



</body> 
</html> 

            </div>
            <div id="footer">
                &copy; 2015 - Test Site
            </div>
        </div>
    </div>
</body>
</html>

Open in new window

Julian HansenCommented:
Thanks - looking at it - in future try to use the code tags - highlight code and click the code button in the toolbar - it makes it a lot easier to work with.

I have added the tags for you.
Julian HansenCommented:
Your code has some issues

1. You are placing your style inside the body tag - this is not valid.
2. You are referencing JQuery but you have not included the library.
3. You have two </body></html> tags at the end of your document with content between them

Run the code through an HTML validator to get the approximate 28 errors

To change the value of a cell based on value is pretty easy with JQuery - you can do like so

$(function() {
  // Find all the <td> elements that contain the word Fred 
  // and change the color of the cell to Red and underline

  $('td:contains("Fred")').css({color: 'red', textDecoration: 'underline'});
});

Open in new window


The example below is your code slightly modified - I have added the JQuery library and the code above.
http://www.marcorpsa.com/ee/t913.html

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.