jqury

Because this  $(this).find("tr").css("background-color", "blue") will select all rows of table and will set background color to blue.

It would be easy to debug it if you can share the html as well.

Here is the html and the jquery:

btw, can you help with how to disable the row as well?
thank you.

<table class="table table-bordered" id="depcattableid">
    <thead>
        <tr class="alert alert-warning">
            <th>CreatedBy</th>
            <th>Createddate</th>
            <th>Status</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody class="tablesorter-infoOnly">
        @foreach (var it in Model.LstCatDep)
            {
            <tr>
                <td>@it.Createdby</td>
                <td>@it.Datecreated</td>
                <td>@it.Status</td>
                <td>
                    <a class="fa fa-binoculars fa-2x" onclick="OpenSearchDepcatDialog(@it.Id)"></a>
                    <input type="hidden" value="@it.Id" />
                </td>
            </tr>
        }
    </tbody>
</table>

Select allOpen in new window

 $("#depcattableid").each(function () {
                var status = $(this).find("td:eq(2)").html();
                debugger;
                alert(status);

                if (status == "Close") {
                    $(this).find("td:eq(0)").css("background-color", "blue")
                    $(this).find("td:eq(1)").css("background-color", "blue")
                    $(this).find("td:eq(2)").css("background-color", "blue")
                    $(this).find("td:eq(3)").css("background-color", "blue").attr('disabled', 'disabled');
                }
            });

Select allOpen in new window

Try this ;)

$("#depcattableid tr").each(function () {
  var status = $(this).find("td:eq(2)").html();
  debugger;
  alert(status);

  if (status == "Close") {
    $(this).css("background-color", "blue")
  }
});

Select allOpen in new window

yes,  I tried this , doesn't work.

Here the working example using the above code, what is not working for you?

https://jsfiddle.net/itzmukeshy7/78qz2g1c/

Thank you.
You were right it works the issue I had here was the id tag I didn't do it right
i changed it to this and use your code
 $("#depcattableid tbody tr").each(function () {

Just one more things do you know how can I disable the row as well, like I don't want the user to be able to click on any button int the row.

can I do something like this -                     $(this).css("background-color", "blue").disabled;

I was trying also something like this $(this).css("background-color", "#FAB4BB").attr("disabled", "disabled"); which is not working.

What do you mean by disabling a row, we can disable form elements, not the row element.

for example i have this row

you can see in the last column I have this binoculars which I want to prevent users to click on after the color change to whatever and it is on close status.

Thank you for your answer.

I decided it will be better to do something like this ...like remove the binoculars class and replace with the other class

 $(this).find("td:eq(3)").removeClass("fa fa-binoculars fa-2x").addClass("fa fa-close fa-2x");

the issue here is it doesn't remove the class and show the other class
Please, can you help just with this one.

Thank you.

Please, can you just answer my last question ? I don't know why it doesn't remove my class although he added the class.
$(this).find("td:eq(3)").removeClass("fa fa-binoculars fa-2x").addClass("fa fa-close fa-2x");

k, I did something like this:
All my purpose here is to change my class and then prevent from user to click on the hyper link.
the only issue I have is the last function, its still linked.

if (status == "Close") {
                    $(this).css("background-color", "#FAB4BB");
                    $(this).find("td:eq(3) a").removeClass("fa fa-binoculars fa-2x");
                    $(this).find("td:eq(3) a").addClass("fa fa-close fa-2x");
                    $('td:eq(3) a', $(this)).on("click", function (e) {
                        e.preventDefault();
                    });
                }

Select allOpen in new window

my final solution thank you.

if (status == "Close") {
                    $(this).css("background-color", "#FAB4BB");
                    $(this).find("td:eq(3) a").removeClass("fa fa-binoculars fa-2x");
                    $(this).find("td:eq(3) a").addClass("fa fa-close fa-2x").removeAttr("onclick").removeAttr("href");
                }

Just as a matter of interest why - when you render the table don't you set a class on the row using the status value and the use CSS to do it for you something like this.

<table class="table table-bordered" id="depcattableid">
    <thead>
        <tr class="alert alert-warning">
            <th>CreatedBy</th>
            <th>Createddate</th>
            <th>Status</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody class="tablesorter-infoOnly">
        @foreach (var it in Model.LstCatDep)
            {
            <tr class="status_@it.Status">
                <td>@it.Createdby</td>
                <td>@it.Datecreated</td>
                <td>@it.Status</td>
                <td>
                    <a class="fa fa-binoculars fa-2x" onclick="OpenSearchDepcatDialog(@it.Id)"></a>
                    <input type="hidden" value="@it.Id" />
                </td>
            </tr>
        }
    </tbody>
</table>

Select allOpen in new window

Now all you need to do is

#depcattableid tr.staus_Closed {
  background: blue;
}

Select allOpen in new window

This is the correct way of doing this - JavaScript should only be used when HTML and CSS are not sufficient to do the job. In this case you are in control of the render of the table - if the Status is static in the page then you can use the render to insert a class to do the styling. If it is dynamic then control the class in the event handler that handle the dynamic nature of the page.

As you have it now - using jQuery is just clumsy.

Thank you for your point, but what about the css change in the last column and disable the link afterward.

if (status == "Close") {
                    $(this).css("background-color", "#FAB4BB");
                    $(this).find("td:eq(3) a").removeClass("fa fa-binoculars fa-2x");
                    $(this).find("td:eq(3) a").addClass("fa fa-close fa-2x").removeAttr("onclick").removeAttr("href");
                }

Your solution bring just 1 of the solution I was trying to achieve in this case.

Please, let me know if I'm wrong.

The onClick was not part of the original question - it was added in the thread. The above solution was to address the background issue. We don't have to use the same solution for both.
There are two options for this
1. You do it in the render with an if statement - I am not sure of the syntax so you will have to amend

<table class="table table-bordered" id="depcattableid">
    <thead>
        <tr class="alert alert-warning">
            <th>CreatedBy</th>
            <th>Createddate</th>
            <th>Status</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody class="tablesorter-infoOnly">
        @foreach (var it in Model.LstCatDep)
            {
            <tr class="status_@it.Status">
                <td>@it.Createdby</td>
                <td>@it.Datecreated</td>
                <td>@it.Status</td>
                <td>
                    <a class="fa fa-binoculars fa-2x" class="search-link" data-id="@it.Id"></a>
                    <input type="hidden" value="@it.Id" />
                </td>
            </tr>
        }
    </tbody>
</table>

Select allOpen in new window

Method 2 - bind your onclick with jQuery only if the parent <tr> does not have status_Closed
This code adds the onclick handler to all a elements with the class search-link that don't have a parent row with class status_Closed.
The id is obtained from a custom data attributed and passed to the OpenSearchDepactDialog as before inside the event handler function.

$(function() {
  $('a.search-link').each(function() {
      if (!$(this).closest('tr').hasClass('status_Closed')) {
         var id = $(this).data('id');
         $(this).click(function() {
               OpenSearchDepcatDialog(id);
         });
      }
  });
});

Select allOpen in new window