How to disable all rows of HTML table?

Question

[Not exactly the same as the question "how to disable knockout click...". My question involves specific usage of an HTML table and contains valuable approaches on solving such case.]

I have the following table and button below it:

<table>
<tbody data-bind="foreach: my-array">
<tr data-bind="click: $ShowDetails()">
...
<button>Add New Record</button>

The table rows are clickable (and would load some details data in another table).
On click of the button I need to disable all table rows and add one new <tr> on top.
I know how to add the new record on top:

$('<tr><td contenteditable="true">New Record Here</td></tr>').prependTo('table > tbody');

But how to disable all rows of the table so they won't be clickable and look disabled (grayed out)?

Answer 1

Just add disabled class to your <tr>'s using $("tr").addClass("disabled").

The grayed out backgroung can be added by using $('tr').css('background-color','grey') or by describing .disabled class in your css-file:

tr.disabled {
    background-color: grey;
}

Then in your ShowDetails() method just check if calling element has the .disabled class by using $(this).hasClass("disabled") method. Show details if it doesn't and do nothing if it does.

Instead of checking the disabled class you can also add a new bool observable named AddMode() and set it to true on Add New button click, and on ShowDetails() put a first line if(AddMode() === true) return; (by @st_stefanov)