2014-11-02 56 views
0

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

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

+0

这是一个有点困难,没有看到与ID和班级的HTML代码。我最好的猜测是'else'部分的代码是在某个事件(复选框)上添加一个处理程序到'click'事件,并且它本身并没有真正删除任何东西......但这是一个猜测。 – 2014-11-02 17:04:44

+0

请检查编辑 – user3844782 2014-11-02 17:08:30

+0

正如我在前面的评论中提到的那样,修改'else'部分以执行删除操作而不是为'click'事件添加处理程序似乎有效:http://jsfiddle.net/4g8nL9t5/ – 2014-11-02 17:21:15

回答

0

根据我们的聊天对话。快速解决方案是将data-productname添加到表中,因此当您取消选中复选框时,它将删除具有相同data-productname的表格(请注意,为此,产品名称必须是唯一的)。

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

+0

一个快速更新,所以表被完全删除(而不是只有tbody),所以当点击删除链接时,复选框会自动取消选中:http://jsfiddle.net/4g8nL9t5/3/ – 2014-11-02 18:22:25

+0

是的,这也起作用了。 – user3844782 2014-11-03 04:56:41

+0

我不太清楚你想要达到的目标,但是我回答了可能的答案。 – 2014-11-03 17:34:51