取消选中时删除一行

时间:2014-11-02 16:45:00

标签: javascript jquery

我有一个表(1),每行都有一个复选框。当我单击一个复选框时,其值显示在另一个表(2)中。在表(2)中,每行都有一个删除选项。如果我单击删除,该行将被删除。以同样的方式,如果我取消选中表(1)中的复选框,则应该删除表(2)中的相应行。所以我应该如何在uncheck上删除一行。我已将这部分代码放在else块中。

$(document).ready(function(){
     $('.isSelected').click(function() {

     var pdtname = $(this).attr('data-productname');

     if ( $('.isSelected:checked').length > 0) {
        $("#result").show();

        var table = $('<table></table>').addClass('tfoo');
        var row = $('<tr></tr>').addClass('rfoo').text(pdtname);
        var link = $('<a href="javascript:void(0);">/a>').addClass('lfoo').text('Remove');

           row.append(link);
           table.append(row);
           $('#result').append(table);

           $("#result").on('click','.lfoo',function(){
           $(this).parent().parent().remove();
            }); 

    } else {
           $('.isSelected[data-productname="pdtname"]').on('click','.lfoo',function(){
                        $(this).parent().parent().remove();
                    }); 
                }
            }); 
        });

HTML

<div id="result" ></div> 

<td><form method='post' action='<c:url value="compareproducts.html"/>' >
            <input class="isSelected" type="checkbox" name='id' value='${product.id}'
                    data-productname="${product.productName}" >
    </form>

1 个答案:

答案 0 :(得分:0)

根据聊天中的对话。一个快速的解决方案是向表中添加data-productname,这样当您取消选中一个复选框时,它会删除具有相同data-productname的表(请注意,为了使其工作,productname必须是唯一的)。

你可以在这个jsfiddle上看到一个例子:http://jsfiddle.net/4g8nL9t5/1/