使用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的建議最終幫助我找到了答案，我會選擇答案與最多的選票作爲最佳答案。