使用jQuery/javascript粘贴表格行之间的数据

Question

我试图在单击每个表格行旁边的图标时动态地插入表格行。我有以下代码插入整个表后：

$(document).on('click','.paste_icon',function(){ 
    var origs=$('.case:checkbox:checked'); 
    for(var a=0; a<origs.length; a++) { 
     addNewRow(); 
     var arr = origs.closest('tr')[a].id.split('_'); 
     var id = arr[arr.length-1]; 
     var dat = getValues(id); 
     setValues(i-1, dat); 
    } 
    $('#check_all').add(origs).prop("checked", false); 
    calculateTotal(); 
}); 

我的表的样本是这样的：

<input value="<?php echo isset($item['quantity']) ? $item['quantity']: ''; ?>" type="hidden" id="previousQuantity_<?php echo $key+1?>" autocomplete="off"/> 

有谁知道是否有可能表格元素之间插入，而不是只是在最后？

要求：（表布局的样本 - 全事情很小，太多的代码）

<table> 
<tr><td> 
<input class="case" type="checkbox"></td> // This adds a checkbox to each row 
</td> 
<td> 
<span class="paste_icon" id="paste_icon_<?php echo $key+1?>"><i class="fa fa-arrow-circle-down fa-2x"></i></span> 
// This adds paste icon to each row 
</td> 
<td> 
<td><input value="<?php echo isset($item['productName']) ? htmlspecialchars($item['productName']) : ''; ?>" type="text" data-type="productName" name="data[InvoiceDetail][<?php echo $key;?>][productName]" id="itemName_<?php echo $key+1?>" class="form-control" autocomplete="off" onkeyup="return tabE(this,event);"></td> 
// sample of one item of a few just to show you the $key method of main table 
</td> 
</tr></table> 

添加新行代码为图标：

// Adds row on add icon click 
$(document).on('click','.add_icon',function(){ 
    var add_icon_id = $(this).attr('id'); 
    var add_icon_arr = add_icon_id.split("_"); 
    var icon_id = add_icon_arr[add_icon_arr.length-1]; 
    addNewRow(icon_id); 
    calculateTotal(); 
}); 

添加新行功能：

var addNewRow = function(id){ 
//table data here 
    if(typeof id !== "undefined"){ 
     $('#tr_'+id).after(html); 
    }else{ 
     $('table').append(html); 
    } 
    $('#caseNo_'+i).focus(); 
    i++; 
} 

Answer 1

向每一行添加一个按钮，如：

<td><button class="addrow">Add row</button></td> 

，然后使用jQuery代码：

$(document).on("click", ".addrow", function() { 
    var thisId = $(this).closest("tr").attr("id"); 
    addNewRow(thisId); 
}); 

这得到当前行的ID。 addNewRow()将此作为可选参数，然后将上述代码传递给它。

Answer 2

我修改发表Barmar代码，使这项工作，充分工作代码如下：

的Javascript：

var addNewRow = function(id){ 

     //Table code here 
     if(typeof id !== "undefined"){ 
       $('#tr_'+id).after(html); 
      }else{ 
       $('table').append(html); 
      } 
      $('#caseNo_'+i).focus(); 
      i++; 
     } 

     // Pastes Row On Icon Click 
     $(document).on('click','.paste_icon',function(){ 
      var origs=$('.case:checkbox:checked'); 
      for(var a=0; a<origs.length; a++) { 

       var paste_icon_id = $(this).attr("id"); 
       var paste_icon_arr = paste_icon_id.split("_"); 
       var icon_id = paste_icon_arr[paste_icon_arr.length-1]; 
       addNewRow(icon_id); 
       var arr = origs.closest('tr')[a].id.split('_'); 
       var id = arr[arr.length-1]; 
       var dat = getValues(id); 
       setValues(i-1, dat); 
      } 
      $('#check_all').add(origs).prop("checked", false); 
      calculateTotal(); 
     }); 
var getValues=function(id){ 
     var inputs=$('#tr_'+id).find('select,input,textarea').filter('[name]'); 
     var values={}; 
     for(var i=0; i<inputs.length;i++){ 
      var cur=inputs[i]; 
      values[cur.name.match(/\[\w+]$/)||cur.name] = $(cur).is(':checkbox, :radio') ? cur.checked : cur.value; 
     } 
     return values; 
    }; 
    var setValues=function(id,values){ 
     var inputs=$('#tr_'+id); 
     for(var i in values){ 
      var cur=inputs.find('[name$="'+i+'"]'); 
      if(cur.is(':checkbox, :radio')) { 
       cur.prop('checked', values[i]); 
      } else { 
       cur.val(values[i]); 
      } 
     } 
    }; 

//to check all checkboxes 
$(document).on('change','#check_all',function(){ 
    $('input[class=case]:checkbox').prop("checked", $(this).is(':checked')); 
}); 

HTML表格代码示例：

<table><tr> 
<td><input class="case" type="checkbox""/></td><td> 
    <span class="paste_icon" id="paste_icon_<?php echo $key+1?>"><i class="fa fa-arrow-circle-down fa-2x"></i></span> 
    </td></tr></table> 

这是什么用于：我有一个表格，在每个表格行上都有一个复选框和一个Font Awesome Icon向下箭头。使用上面的代码，你可以点击Font Awesome Icon来复制任何预选的复选框表格行。既然Barmars的建议最终帮助我找到了答案，我会选择答案与最多的选票作为最佳答案。