knockout.js 如何禁用HTML表的所有行？

b0zn9rqh 于 2022-11-10 发布在其他

关注(0)|答案(4)|浏览(170)

[Not与问题“如何禁用敲除点击..."完全相同。我的问题涉及HTML表的具体用法，并包含解决此类情况的有价值的方法。]
我有下面的表和按钮在它下面：

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

表行是可单击的（并且将在另一个表中加载一些详细数据）。
点击按钮后，我需要禁用所有表行，并在顶部添加一个新的<tr>。
我知道如何在上面添加新记录：

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

但是如何禁用表中的所有行，使它们看起来不可点击（灰显）呢？

knockout.js

来源：https://stackoverflow.com/questions/34810013/how-to-disable-all-rows-of-html-table

4条答案

按热度按时间

qeeaahzv1#

只需使用$("tr").addClass("disabled")将disabled类添加到您的<tr>类中。
灰色背景可以通过使用$('tr').css('background-color','grey')或在css文件中描述.disabled类来添加：

tr.disabled {
    background-color: grey;
}

然后在你的ShowDetails()方法中，使用$(this).hasClass("disabled")方法检查调用元素是否有.disabled类。如果没有，则显示详细信息，如果有，则不执行任何操作。
除了检查禁用的类，您还可以添加一个名为AddMode()的新bool可观察对象，并在单击“添加新对象”按钮时将其设置为true，然后在ShowDetails()上放置第一行if(AddMode() === true) return;（by @st_stefanov）

赞(0）回复(0）举报 2022-11-10

yhuiod9q2#

我用这个CSS代码来禁用HTML行

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

赞(0）回复(0）举报 2022-11-10

35g0bw713#

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

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

     });
});

赞(0）回复(0）举报 2022-11-10

yeotifhr4#

$(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>

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 如何禁用HTML表的所有行？

4条答案

相关问题

热门标签

最新问答