Question

134

How to disable all rows of HTML table?

rated 0 times [ 138] [ 4] / answers: 1 / hits: 46780 / 9 Years ago, fri, january 15, 2016, 12:00:00

[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)?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

michelecarissab

Add To Favorites

Follow

Total Points: 730

Total Questions: 97

Total Answers: 110

Location: Uzbekistan

Member since Sat, Feb 27, 2021

3 Years ago

answered 9 Years ago rocioblancac · Accepted Answer

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)