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

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

CateringPreviewCell

然后使用jQuery代码：

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

这将获取当前行的ID。 $(document).on("click", ".addrow", function() { var thisId = $(this).closest("tr").attr("id"); addNewRow(thisId); });将其作为可选参数，然后上面的代码传递给它。

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>

这用于：我有一个表，每个表行上都有一个Checkbox，还有一个Font Awesome Icon Down箭头。使用上面的代码，您可以单击Font Awesome图标以复制任何预选的已选中的表行。由于巴马的建议最终帮助我找到了答案，我将选出最多票数的答案作为最佳答案。

使用jquery / javascript在表行之间粘贴数据

2 个答案: