Question

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

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

的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>

我要做的最后一件事是复制我的所有JavaScript并重命名以匹配上述内容。

我想知道的是，无论如何我可以重用JavaScript吗？

任何建议表示赞赏。

由于

（代码也可用JSFiddle）

Answer 1

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

在具有正常控制的页面上

function addRow() {
  // Row adding code...
}

在包含额外控件的页面上

var oldAddRow = addRow;
var addRow = function(){
  $('.some_other_control').click(ctrlHandler);
  $('.some .input').val('');
  oldAddRow();
}

Answer 2

我建议您在表格中设置一个不可见的“模板行”，您可以将其复制以添加新行。

这样的事情：

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

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

演示：http://sam.nipl.net/table-demo.html

Answer 3

你可能只是克隆一行并用以下内容重置属性：

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}));

到

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

jQuery - 重用代码而不重复它

3 个答案: