Question

下面的jquery片段工作正常。我想知道如何将它写为接受table1作为参数的函数，以便我可以在代码的其他部分重用此函数。对于例如如果我有id table2的表而不是添加新函数我应该使用现有的

$(document).ready(function(){    
    $("#table1").on('click','.btnDelete',function(){
        $(this).closest('tr').remove();
  });
});

Answer 1

有很多方法可以用一种方式处理使用属性选择器

  $("[id^=table]").on('click','.btnDelete',function(){
        $(this).closest('tr').remove();
  });

Answer 2

采用不同的方法并分配行为类，例如：

$(".table-with-removable-rows").on('click','.btnDelete',function(){
    $(this).closest('tr').remove();
});

然后，只要您想要这种行为，就可以添加该类，例如：

<table class="table-with-removable-rows">...

那是：

无需更改任何代码
它不会影响每个表，只会影响您设置的表
您无需格式化ID以触发行为
html上的行为很明显

Answer 3

这很简单，只需命名你的功能并在任何你想要的地方使用它

$(document).ready(function() {    
  var deleteAction = function() {
     $(this).closest('tr').remove();
  };
  $("#table1").on('click', '.btnDelete', deleteAction);
  $("#table2").on('click', '.btnDelete', deleteAction);
  $(".btnDelete").on('click', deleteAction);
  // etc etc.
});

Answer 4

   $(document).ready(function(){    
      $("#table1").on('click','.btnDelete',function(){
         RemoveRow($(this));
      });

      function RemoveRow(table){
         $(table).closest('tr').remove();
      }

  });

Answer 5

使用multiple-selector

 $("#table1,#table2,#table3").on('click', '.btnDelete', function() {
   $(this).closest('tr').remove();
 });

使用Attribute-starts-with选择器

$("[id^=table]").on('click', '.btnDelete', function() {
  $(this).closest('tr').remove();
});

如何为jquery函数编写函数和传递参数

5 个答案: