title: How to disable all rows of HTML table?
body: <p>[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.]</p>
  
  <p>I have the following table and button below it:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody data-bind="foreach: my-array"&gt;
  &lt;tr data-bind="click: $ShowDetails()"&gt;
  ...
  &lt;button&gt;Add New Record&lt;/button&gt;
  </code></pre>
  
  <p>The table rows are clickable (and would load some details data in another table).<br>
  On click of the button I need to disable all table rows and add one new <code>&lt;tr&gt;</code> on top.<br>
  I know how to add the new record on top:</p>
  
  <pre><code>$('&lt;tr&gt;&lt;td contenteditable="true"&gt;New Record Here&lt;/td&gt;&lt;/tr&gt;').prependTo('table &gt; tbody');
  </code></pre>
  
  <p>But how to disable all rows of the table so they won't be clickable and look disabled (grayed out)?</p>