Javascript jQuery—重用代码而不复制代码

我有一个页面，它本质上是一个表，当按下按钮时，它的行被复制。每一行都有一个唯一的id/名称

我现在有这个问题。我基本上在不同的页面上有一个类似的表格。主要区别在于它可能有额外的输入。目前，它看起来是这样的：

<style>
tr.template { display: none; }
</style>

<table id="table1">
<tr class="template"><td><input id="blah">/td><td><input id="foo"></td></tr>
</table>

<button id="add">Add Row</button>

<script>
function add_row($table) {
    var count = $table.find('tr').length - 1;
    var tr_id = ""+(count+1);
    var $template = $table.find('tr.template');
    var $tr = $template.clone().removeClass('template').prop('id', tr_id);
    $tr.find(':input').each(function() {
        var input_id = $(this).prop('id');
        input_id = tr_id + '_' + input_id;
        $(this).prop('id', input_id);
    });
    $table.find('tbody').append($tr);
}
$('#add').on('click', function() { add_row($('#table1')); });
</script>

JavaScript

 var cloned;

 $(function() {
   initDatepickersAndSelect();

   $('#add_row').on('click', function(evt) {
     addRow();
   });
   $('#delete_row').on('click', function(evt) {
     deleteRow();
   });

   $('#add_row2').on('click', function(evt) {
     addRow(x);
   });
   $('#delete_row2').on('click', function(evt) {
     deleteRow(x);
   });
 });

 function initDatepickersAndSelect() {
   cloned = $("table tr#actionRow0").eq(0).clone();
   $(".dateControl").datepicker({
     dateFormat: "dd-mm-yy"
   });

   $(".responsibility").select2({
     tags: true
   });

   $(".campaignType").select2({
     tags: true
   });
 }

 function addRow() {

   var $tr = cloned.clone();
   var newRowIdx = $("table#actionTable tr").length - 1;
   $tr.attr('id', 'actionRow' + newRowIdx);

   $tr.find("input, select").each(function(i_idx, i_elem) {
     var $input = $(i_elem);

     if ($input.is("input")) {
       $input.val("");
     }

     $input.attr({
       'id': function(_, id) {
         return id + newRowIdx;
       },
       'name': function(_, name) {
         return name.replace('[0]', '[' + newRowIdx + ']');
       },
       'value': ''
     });

   });
   $tr.appendTo("table#actionTable");

   $(".dateControl", $tr).datepicker({
     dateFormat: "dd-mm-yy"
   });

   $(".responsibility", $tr).select2({
     tags: true
   });

   $(".campaignType", $tr).select2({
     tags: true
   });
 }

 function deleteRow() {
   var curRowIdx = $("table#actionTable tr").length;
   if (curRowIdx > 2) {
     $("#actionRow" + (curRowIdx - 2)).remove();
     curRowIdx--;
   }
 }

HTML

<div class="col-md-12 noPadding">
  <table class="table table-bordered table-hover additionalMargin" id="reportTable">
    <thead>
      <tr>
        <th class="text-center">Something</th>
        <th class="text-center">Something else</th>
      </tr>
    </thead>
    <tbody>
      <tr id='actionRow0'>
        <td>
          <select class="campType" name='reportInput[0][campType]' id="reportInput">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </td>
        <td>
          <input type="text" name='reportInput[0][campDelivery]' id="dateInput" class="form-control" />
        </td>
      </tr>
    </tbody>
  </table>
  <a id="add_row" class="btn btn-default pull-right">Add Row</a>
  <a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

某物
别的
1.
2.
3.
4.
)根据我对这个问题的理解，我认为你可以这样做。假设有一个名为
addRow
的函数，就像在你的小提琴中看到的那样，第一步是在你想要这个功能的所有页面上都包含这个JS。然后您提到其他页面可能有其他控件。为此，我将重写函数

在具有正常控件的页面上

在带有额外控件的页面上

根据我对这个问题的理解，我认为你可以这样做。假设有一个名为
addRow
的函数，就像在你的小提琴中看到的那样，第一步是在你想要这个功能的所有页面上都包含这个JS。然后您提到其他页面可能有其他控件。为此，我将重写函数

在具有正常控件的页面上

在带有额外控件的页面上

我建议在您的表中有一个不可见的“模板行”，您可以复制它来添加新行

大概是这样的：

<style>
tr.template { display: none; }
</style>

<table id="table1">
<tr class="template"><td><input id="blah">/td><td><input id="foo"></td></tr>
</table>

<button id="add">Add Row</button>

<script>
function add_row($table) {
    var count = $table.find('tr').length - 1;
    var tr_id = ""+(count+1);
    var $template = $table.find('tr.template');
    var $tr = $template.clone().removeClass('template').prop('id', tr_id);
    $tr.find(':input').each(function() {
        var input_id = $(this).prop('id');
        input_id = tr_id + '_' + input_id;
        $(this).prop('id', input_id);
    });
    $table.find('tbody').append($tr);
}
$('#add').on('click', function() { add_row($('#table1')); });
</script>


tr.template{display:none；}
/td>
添加行
函数添加行（$table）{
var count=$table.find（'tr'）。长度-1；
var tr_id=“”+（计数+1）；
var$template=$table.find（'tr.template'）；
var$tr=$template.clone（）.removeClass（'template'）.prop（'id'，tr_id）；
$tr.find（':input'）。每个（函数（）{
var input_id=$（this.prop（'id'）；
input_id=tr_id+''''.'+input_id；
$（this）.prop（'id'，input_id）；
});
$table.find（'tbody'）.append（$tr）；
}
$（'#add'）。在（'click'，function（）{add_row（$（'#table1'））；}）上；

我认为用这种方式使代码更通用会更容易。如果不希望提交模板中的输入，可以禁用它们或以某种方式删除它们

演示：
我建议在您的表中有一个不可见的“模板行”，您可以复制它来添加新行

大概是这样的：

<style>
tr.template { display: none; }
</style>

<table id="table1">
<tr class="template"><td><input id="blah">/td><td><input id="foo"></td></tr>
</table>

<button id="add">Add Row</button>

<script>
function add_row($table) {
    var count = $table.find('tr').length - 1;
    var tr_id = ""+(count+1);
    var $template = $table.find('tr.template');
    var $tr = $template.clone().removeClass('template').prop('id', tr_id);
    $tr.find(':input').each(function() {
        var input_id = $(this).prop('id');
        input_id = tr_id + '_' + input_id;
        $(this).prop('id', input_id);
    });
    $table.find('tbody').append($tr);
}
$('#add').on('click', function() { add_row($('#table1')); });
</script>


tr.template{display:none；}
/td>
添加行
函数添加行（$table）{
var count=$table.find（'tr'）。长度-1；
var tr_id=“”+（计数+1）；
var$template=$table.find（'tr.template'）；
var$tr=$template.clone（）.removeClass（'template'）.prop（'id'，tr_id）；
$tr.find（':input'）。每个（函数（）{
var input_id=$（this.prop（'id'）；
input_id=tr_id+''''.'+input_id；
$（this）.prop（'id'，input_id）；
});
$table.find（'tbody'）.append（$tr）；
}
$（'#add'）。在（'click'，function（）{add_row（$（'#table1'））；}）上；

我认为用这种方式使代码更通用会更容易。如果不希望提交模板中的输入，可以禁用它们或以某种方式删除它们

演示：
您只需克隆一行，然后用如下方法重置其中的attibutes：

function addRow(id) {
  var c = $("table#"+id+" tr").last();
  $("table#"+id+" tbody").append(c.clone().attr({id: "addedrow" + Math.random()*10+1}));
}

function deleteRow(id,index) {
  var curRowIdx = $("table#"+id+" tr").length;
  if (curRowIdx > 2) {
    if(index != void 0) {
      $("table#"+id+" tr")[index].remove();
    }else{
      $("table#"+id+" tr").last().remove();
    }        
  }
}

称之为

$('#add_row').on('click', function(evt){addRow("reportTable");});
$('#delete_row').on('click', function(evt){deleteRow("reportTable",1);});

也许你会为你的桌子准备新行，比如

var emptyRow[id] = $("table#"+id+" tr").last();

改变

$("table#"+id+" tbody").append(c.clone().attr({id: "addedrow" + Math.random()*10+1}));

到

您可以只克隆一行并在其中重置attibutes，方法如下：

function addRow(id) {
  var c = $("table#"+id+" tr").last();
  $("table#"+id+" tbody").append(c.clone().attr({id: "addedrow" + Math.random()*10+1}));
}

function deleteRow(id,index) {
  var curRowIdx = $("table#"+id+" tr").length;
  if (curRowIdx > 2) {
    if(index != void 0) {
      $("table#"+id+" tr")[index].remove();
    }else{
      $("table#"+id+" tr").last().remove();
    }        
  }
}

称之为

$('#add_row').on('click', function(evt){addRow("reportTable");});
$('#delete_row').on('click', function(evt){deleteRow("reportTable",1);});

也许你会为你的桌子准备新行，比如

var emptyRow[id] = $("table#"+id+" tr").last();

改变

$("table#"+id+" tbody").append(c.clone().attr({id: "addedrow" + Math.random()*10+1}));

到

是的，可能有。。。但是，除非我们看到一些Javascript创建一个函数并在需要时使用该函数，否则我们帮不了什么忙。那么jQuery插件呢？对于添加了功能的第二个表，您可以扩展该插件。为了避免重命名控件，您可以使用其他方法来识别它们，例如data-*属性。。。但是，除非我们看到一些Javascript创建一个函数并在需要时使用该函数，否则我们帮不了什么忙。那么jQuery插件呢？对于添加了功能的第二个表，您可以扩展该插件。为了避免重命名控件，可以使用其他方法（如data-*属性）来识别它们。