Question

我正在使用一个小的脚本来复制表行，但是我的函数代码太长了，我正在寻找一种新的编写方法，有人可以帮助更好地编写我的函数吗？

这是我的代码：

function _dynamicTable(){
// clone the first table row after clicking on duplicate row
$('.duplicate-row').click(function(){
    var tableId = $(this).attr('href');
    var initial = $(''+tableId+' tr').length;
    // Clone the first table row TR and duplicate 
    var newLine = $(tableId).find('tr:eq(1)').clone();
    $(tableId).append(newLine);
    // Increment input fields when the user add a new quote line 
    var itemPrice = $(tableId).find('tr:last .item-price').attr('id', 'item-price-'+initial);
    var itemQuantity = $(tableId).find('tr:last .item-quantity').attr('id', 'item-quantity-'+initial);
    var itemDiscount = $(tableId).find('tr:last .item-discount').attr('id', 'item-discount-'+initial);
    var itemName = $(tableId).find('tr:last .item-name').attr('id', 'item-name-'+initial);
    var itemReference = $(tableId).find('tr:last .item-reference').attr('id', 'item-reference-'+initial);
    var itemTotal = $(tableId).find('tr:last .item-total').attr('id', 'item-total-'+initial);
    //
    $(tableId).find('tr:last .item-line').val(initial);
    // Turn free the inputs fields since we clone the first line each time user click on add new line button
    $(tableId).find('tr:last input.form-control').val('');
    return false;
});

// remove table row on delete-row button click 
$('.table').on('click', '.delete-row', function(){
    var tableId = $(this).attr('href');
    if($(''+tableId+ ' > tbody > tr').length > 1){
        $(this).closest('tr').remove();
        window._ajaxForm("#setQuoteItems");
    }
    return false;
});}

这是我的HTML代码：

<tbody>
                                    <tr>
                                        <td class="pl-0 pr-1">
                                            <input type="text" id="item-reference-1" data-type="reference" class="item-reference auto-complete form-control rounded-0" placeholder="Reference" name="reference[]" disabled>
                                            <input type="text" name="itemline[]" class="item-line" value="1" style="display:none;">
                                            <input type="text" name="quoteid" class="quote-id" value="" style="display:none;">
                                        </td>
                                        <td class="pl-1 pr-1 col-md-5">
                                            <input type="text" id="item-name-1" data-type="name" class="item-name auto-complete form-control rounded-0" placeholder="Product Name" name="name[]" disabled>
                                        </td>
                                        <td class="pl-1 pr-1">
                                            <input type="text" id="item-price-1" class="item-price form-control rounded-0" placeholder="Eugene Kopyov" name="price[]" disabled>
                                        </td>
                                        <td class="pl-1 pr-1 col-md-1">
                                            <input type="text" id="item-quantity-1" class="item-quantity form-control rounded-0" placeholder="Eugene Kopyov" name="quantity[]" disabled>
                                        </td>
                                        <td class="pl-1 pr-1 col-md-1">
                                            <input type="text" id="item-discount-1" class="item-discount form-control rounded-0" placeholder="Eugene Kopyovsss" name="discount[]" disabled>
                                        </td>
                                        <td class="pl-1 pr-0 col-md-2">
                                            <div class="input-group">
                                                <input type="text" id="item-total-1" class="item-total form-control rounded-0" placeholder="Total" name="total[]" disabled>
                                                <span class="input-group-append">
                                                    <a href="#quote" class="delete-row input-group-text"><i class="icon-cancel-square2" style="color:red;"></i></a>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>      
                                </tbody>

请让我知道是否需要其他代码

Answer 1

您可以创建类数组并使用map对其进行迭代。

function _dynamicTable(){
  // clone the first table row after clicking on duplicate row
  $('.duplicate-row').click(function(){
      var tableId = $(this).attr('href');
      var initial = $(''+tableId+' tr').length;
      // ... code
      const classes = ['item-price', 'item-quantity', 'item-discount', 'item-name', 'item-reference', 'item-total'];
      const [itemPrice, itemQuantity, itemDiscount, itemName, itemReference, itemTotal] = classes.map((className) => $(tableId).find('tr:last' + '.' + className).attr('id', className + '-' + initial));
      // ... code
  });
}

重复的表行函数，代码更少

1 个答案: