如何在特定时间启用和禁用表行和列?

时间:2015-03-23 15:55:05

标签: jquery

我创建了一个表,其中的列从用户从另一个表中选择的项目进行更新。但我希望当达到特定级别的项目数时,需要禁用正在更新的表以进一步输入所选项目。我该怎么办?

 <table border="1" class="table1" >
 <tr><td>Name</td><td>Value</td></tr>
 <tr><td class="name">Mango</td><td class="value">100</td>>/tr>
 <tr><td class="name">Orange</td><td class="value">150</td></tr>
 <tr><td class="name">Apple</td><td class="value">200</td></tr>
 </table>

 <table border="1" class="table2" >
 <tr><td>Name</td><td>Value</td></tr>
 <tr><td class="text">
 </td><td class="value"></td></tr>
 <tr><td><span class="items">0</span>Items | Total</td><td class="total">
 0</td></tr></table>

我希望当从第一个表中选择项目时,第二个表格会更新为项目名称及其值..类别项目的文本应该有增量,并且项目的值也应该添加到总类别中...但是用户只能从第一张桌子中选择两件物品。因此,当选择两个项目时,我希望禁用第二个表的列,以便它不会从第一个表中获取更多条目。 Pl帮助。

 if ($('.items').html() == "2" ){
 $(".table2").attr("disabled", "disabled");
}

我已尝试使用此代码禁用该表但无效。

1 个答案:

答案 0 :(得分:0)

通过禁用所选项目列表,我不确定您的意思。你可以在选择最大值时隐藏第一个列表吗?我在这里使用div来清楚。

<div id="mango" class="name">Mango</div>
<div id="orange" class="name">Orange</div>
<div id="apple" class="name">Apple</div>

<div class="text"></div>
<div class="value"></div>

<div id="counter"></div>

JS:

$(function(){
 var count = 0;
        $(".name").click(function() {

var fruit = $(this).attr('id');


   $('.text').append("" + fruit + "");
    $('#counter').html(count);

  count++; 
            if(count > 1) {
                $('.name').hide();
            }

        })
});

http://jsfiddle.net/toL33fzy/4/