将最后一个表格行的选定值复制到新行

Question

在我的脚本中，当用户单击“添加”按钮时，我将添加一个表行，并且我想将新表行（具有输入框和下拉选择）的值设置为与旧表行相同最后一行。 我会试试这个脚本，但它失败了：

$('input[name=add]').live('click', function()
{
    var y = $('table tbody tr').length;
    var x = $('table tbody tr td').length;
    var last = $('table tbody tr:last');
    //alert(last.find('select:first').val());
    var value;
    last.clone(true).insertAfter(last);
    //alert(y);
    $('table tbody tr:last').find('td:last').html('<input type="button" class="btn" name="delete" value=" - " />');

    var col =$('table tbody').find('tr').eq(y).find('td');
    col.eq(x).each(function(index, element) {
        if(col.eq(index).has('input'))
        {
            value=$(this).val();
            $('table tbody tr:last').find('td').eq(index).find('input').val(value);
        }elseif(col.eq(index).has('select'))
        {
            value = col.eq(index).find('select').val();
            $('table tbody tr:last').find('td').eq(index).find('select').val(value);
        }
    });

它只适用于第一个输入框。 表格行是这样的：

<tbody>
    <tr><td><input type="text" class="input-small" name="article" /></td>
        <td>
            <select name="colore">
                <option value="nabuk">Nabuk</option>
                <option value="nero">Nero</option>
                <option value="blu">Blu</option>
                <option value="rosso">Rosso</option>
            </select>
         </td>
        <td>
            <select name="fondo">
                <option value="gomma">Gomma</option>
                <option value="cuoio">Cuoio</option>
                <option value="legno">Legno</option>
            </select>
        </td>
        <td>
            <select name="numero">
                <option value="36">36</option>
                <option value="37">37</option>
                <option value="38">38</option>
                <option value="39">39</option>
            </select></td>
        <td><input type="number" class="input-mini" min="1" max="200" name="qnt" step="1" /></td>
        <td></td>
    </tr>
</tbody>

Answer 1

我认为你不需要这么大的代码，试试这个：

$('table').on('click', '.btn', function() {
    $(this).closest('tr').remove();
});

$('input[name=add]').on('click', function() {
    var cloned = $('table tr:last').clone(true); // clone last row
    // looping over last row's inputs
    $('table tr:last').find(':input').each(function() {
        // set values to cloned inputs same previous
        cloned.find(':input[name=' + this.name + ']').val(this.value);
    });
    $('table > tbody').append(cloned); // append the cloned row to table
});

DEMO

​

根据评论

$('table').on('click', 'input[name=add]', function() {
    var cloned = $('table tbody tr:last').clone(true);
    cloned.find('td:last').html('<input type="button" class="btn" name="delete" value=" - " />');
    $('table tbody tr:last').find('select').each(function() {
        cloned.find('select[name^=' + this.name.replace('[]','') + ']').val(this.value);
    });

    $('table tbody').append(cloned);
});

DEMO

Answer 2

这是您可以使用的代码，您可以使用它来完成您想要的，您可以进一步优化，但它可以满足您的需求

$('body').on('click', 'input[name=add]',function()
{
    var last = $('table tbody tr:last');
    var value;
    last.clone(true).insertAfter(last);
    $('table tbody tr:last')
         .find('td:last')
         .html('<input type="button" class="btn" name="delete" value=" - " />');
    var col = last.find('td');
    col.each(function(index, element) {
        if($(this).find(':text').length)
        {
            value=$(this).find(':text').val();
            $('table tbody tr:last')
                  .find('td').
                     eq(index).find('input').val(value);
        }else if($(this).find('select').length)
        {
            value = $(this).find('select').val();
            $('table tbody tr:last')
                  .find('td').eq(index)
                  .find('select').val(value);
        }
                   });
});

$('table').on('click','.btn',function(){
   $(this).closest('tr').remove();
});​

我使用了$.on，因为$.live 现在已经贬值了。

Working Fiddle

Answer 3

不幸的是，jQuery 克隆并没有深度复制 selectedIndex。这是一个简洁的解决方法，尽管对于大型文档可能会很慢：

$("table tr:last select").change(function() {
    $("table tr:last").find(":selected").attr("selected", "selected");
});

$('button[name=add]').live('click', function() {
    $("table tr:last").find(":selected").attr("selected", "selected");
    $("table tr:last").clone().appendTo("tbody");
});​

http://jsfiddle.net/m8RNb/1/