使用 javascript 在 html 中添加动态行

Question

我正在试验以下 .js 代码，它为我动态地将表单字段添加到页面：

var i=$('table tr').length;
$(".addmore").on('click',function(){
    addNewRow();
});

$(".addmany").on('click',function(){
    addNewRow();
    addNewRow();
});

$(document).on('keypress', ".addNewRow", function(e){
    var keyCode = e.which ? e.which : e.keyCode;
    if(keyCode == 9 ) addNewRow();
});
var addNewRow = function(){
    html = '<tr>';
    html += '<td><input class="case" id="caseNo_'+i+'" type="checkbox"/></td>';
    html += '<td><input type="text" data-type="productCode" name="data[InvoiceDetail]['+i+'][product_id]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="productName" name="data[InvoiceDetail]['+i+'][productName]"  id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][price]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';

    html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][quantity]" id="quantity_'+i+'" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">';
    html += '<input type="hidden" id="stock_'+i+'"/>';
    html += '<input type="hidden" id="stockMaintainer_'+i+'" name="data[InvoiceDetail]['+i+'][stockMaintainer]" />';
    html += '<input type="hidden" id="previousQuantity_'+i+'"/>';
    html += '<input type="hidden" id="invoiceDetailId_'+i+'"/>';
    html += '</td>';
    html += '<td><input type="text" id="total_'+i+'" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td><input type="checkbox" data-type="staged" name="data[InvoiceDetail]['+i+'][staged]"  id="staged_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '</tr>';
    $('table').append(html);

    $('#caseNo_'+i).focus();

    i++;
}

效果很好，我可以根据需要添加产品线。

但是，我希望能够在现有行之间添加行。
有谁知道我会怎么做？

现在代码执行如下：

Apples
Bananas
Oranges

添加行（按钮）

Apples
Bananas
Oranges
New Item

我希望它在需要时像这样工作：

Apples
New Item
Bananas
Oranges

可能通过每行旁边的图标，单击该图标可在所述项目上方或下方添加一行。

表格样本：

<?php if(isset($invoice['InvoiceDetail'])&&!empty($invoice['InvoiceDetail'])){?>
                                    <?php foreach ( $invoice['InvoiceDetail'] as $key=>$item){?>
                                        <tr>
                                            <td> <input class="case" type="checkbox"/> </td>
                                            <td><input value="<?php echo isset($item['product_id']) ? $item['product_id']: ''; ?>" type="text" data-type="productCode" name="data[InvoiceDetail][<?php echo $key;?>][product_id]" id="itemNo_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input value="<?php echo isset($item['productName']) ? $item['productName']: ''; ?>" type="text" data-type="productName" name="data[InvoiceDetail][<?php echo $key;?>][productName]" id="itemName_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td>
                                            <td><input value="<?php echo isset($item['price']) ? $item['price']: ''; ?>" type="number" name="data[InvoiceDetail][<?php echo $key;?>][price]" id="price_<?php echo $key+1?>" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td>
                                                <input value="<?php echo isset($item['quantity']) ? $item['quantity']: ''; ?>" type="number" name="data[InvoiceDetail][<?php echo $key;?>][quantity]" id="quantity_<?php echo $key+1?>" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                                <input value="<?php echo isset($item['quantityInStock']) ? $item['quantityInStock']: ''; ?>"  type="hidden" id="stock_<?php echo $key+1?>" autocomplete="off"/>
                                                <input value="0" type="hidden" id="stockMaintainer_<?php echo $key+1?>" name="data[InvoiceDetail][<?php echo $key;?>][stockMaintainer]" autocomplete="off"/>
                                                <input value="<?php echo isset($item['quantity']) ? $item['quantity']: ''; ?>" type="hidden" id="previousQuantity_<?php echo $key+1?>" autocomplete="off"/>
                                                <input value="<?php echo isset($item['id']) ? $item['id']: ''; ?>" type="hidden" id="invoiceDetailId_<?php echo $key+1?>" autocomplete="off"/>
                                            </td>
                                            <td><input value="<?php echo $item['price']*$item['quantity']; ?>" type="number" id="total_<?php echo $key+1?>" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                            <td><input type="checkbox" <?php if(isset($item['staged']) && $item['staged'] == 1) echo "checked=\"checked\""?> data-type="checkbox" name="data[InvoiceDetail][<?php echo $key;?>][staged]" id="staged_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td>

                                        </tr>
                                    <?php } ?>
                                <?php }else{?>
                                    <tr>
                                        <td><input class="case" type="checkbox"/></td>
                                        <td><input type="text" data-type="productCode" name="data[InvoiceDetail][0][product_id]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
                                        <td><input type="text" data-type="productName" name="data[InvoiceDetail][0][productName]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off"></td>
                                        <td><input type="number" name="data[InvoiceDetail][0][price]" id="price_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                        <td>
                                            <input type="number" name="data[InvoiceDetail][0][quantity]" id="quantity_1" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
                                            <input type="hidden" id="stock_1" autocomplete="off"/>
                                            <input type="hidden" name="data[InvoiceDetail][0][stockMaintainer]" id="stockMaintainer_1" autocomplete="off"/>
                                            <input type="hidden" id="previousQuantity_1" autocomplete="off"/>
                                            <input type="hidden" id="invoiceDetailId_1" autocomplete="off"/>
                                        </td>
                                        <td><input type="number" id="total_1" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
                                        <td><input value="1" type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1" class="form-control autocomplete_txt" autocomplete="off"></td>                                 
                                        </tr>
                                <?php } ?>

Answer 1

您还可以考虑创建这些行sortable（使用 jQueryUI），以便用户可以决定稍后更改顺序（如果这很重要）。

否则想想你的代码的这种修改概念：

var addNewRow = function(element, type) {
    var html = '<tr>' // etc ....

    (type == 'after') ? element.after(html) : element.append(html);

    $('#caseNo_'+i).focus();

    i++;
}

// Where ever you're doing this now..
addNewRow($('table'), 'append');

// maybe in click rule of (I am assuming - nested) icon in your TR, use .closest('tr') to get the element.
addNewRow($(this).closest('tr'), 'after');

要保留这样的数字顺序：

var reOrder = function() {

    var table = $('table');
    table.children('tr').each(function(){
        var tr = $(this);
        var i = table.index(tr) + 1; // because index starts at 0
        tr.attr('data-some-attribute', 'new_value_'+i);
    }
};

---

OP 想要更多的 jQuery 来了解它们如何协同工作......

// Define Vars

var table = $('table'); // try to make this more specific of a selector../
var addRowButton = $('#specific-button');

// This function, with missing parts "etc" added in:
var addNewRow = function(element, type) {
    var html = '<tr>' // etc ....

    // don't forget to add the "add row button" html to this also

    (type == 'after') element.after(html) : element.append(html);

    $('#caseNo_'+i).focus();

    i++;
};

// Re Order table to preserve row numbering
var reOrder = function() {
    table.children('tr').each(function(){
        var tr = $(this);
        var i = table.index(tr) + 1; // because index starts at 0

        tr.attr('data-some-attribute', 'new_value_'+i);
    }
};


// You have 1 add row button:

addRowButton.click(function(){

    // Call to addNewRow
    addNewRow(table, 'append');

});

// I assume you'll nest your buttons to add a row below in your current row..
table.find('.add-row-button').click(function(){

    // Call to add row
    addNewRow($(this).closest('tr'), 'after');

    // Call to reOrder table
    reOrder();

});