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

Posted 2023-05-09

【中文标题】将最后一个表格行的选定值复制到新行

【英文标题】：Copy selected value of last table row, to the new one

【发布时间】：2012-06-07 07:23:35

【问题描述】：

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

$('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>

【参考方案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

【讨论】：

是否需要为新行设置输入值？我的印象是.clone() 无论如何都复制了它们。

@JamWaffles jQuery 不会将先前的值设置为克隆的输入，这是一个错误。检查这个jsfiddle.net/pkdGW/4.. 你会看到一些输入不更新

@user1432059 你能解释一下这个问题吗？

添加一行后，在每行的最后一个 td 上显示一个按钮（最后一行除外），其中名称与我在 javascript 中编写的名称不同！并且每个新行的值与上一行的值不同！

@user1432059 它工作正常，你期望最后一个按钮有什么价值？

【参考方案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

【参考方案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/

【讨论】：

我的解决方案有一个错误......它不能正常工作：S