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

Solution 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)

Solution 2

$(function (){
     var myDisableBtn = $('#btn');
     myDisableBtn.on('click',function (){

       $('tr').css({'pointer-events':'none',
                    'background-color':'grey'});

     });
});

Solution 3

$(document).ready(function () {
        $('#btn').click(function () {
            $('#test_table tr').prop('disabled', 'disabled').css('background-color', 'grey');

            $('#test_table tbody').prepend('<tr><td contenteditable="true">New Record Here</td></tr>')
        });
    });


 <input type="button" id="btn" value="Add New Record"/>
    <table style="width:100%" id="test_table">
        <tbody>
  <tr>
    <td>Jill</td>
  </tr>
  <tr>
    <td>Eve</td>
  </tr>
            </tbody>
</table> 

Solution 4

I used this CSS code to disable HTML row

.row-disabled {
   background-color: rgba(236, 240, 241, 0.5);
   pointer-events: none;
   width: 100%;
}

View more solutions