Javascript 将上一表行的选定值复制到新值

在我的脚本中，当用户单击“添加”按钮时，我将添加一个表行，我希望将新表行（具有输入框和dropbown select）的值设置为与旧的最后一行相同的值。 我将尝试此脚本，但失败：

$('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);
        }
    });

$（'input[name=add]'）。live（'click'，function（）
{
变量y=$（'table tbody tr'）。长度；
变量x=$（'table tbody tr td'）。长度；
var last=$（'table tbody tr:last'）；
//警报（last.find（'select:first'）.val（））；
var值；
last.clone（true）.insertAfter（last）；
//警报（y）；
$（'table tbody tr:last'）.find（'td:last'）.html（“”）；
var col=$（'table tbody'）.find（'tr'）.eq（y）.find（'td'）；
列式等式（x）.每个（函数（索引，元素）{
if（列等式（索引）.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>

纳布克
尼禄
布鲁
罗索
贡马
皮革
莱尼奥
36
37
38
39

这是一段代码，你可以用它来完成你想要的，你可以进一步优化，但它做的是你需要的

$('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();
});​

$（'body'）。在（'click'，'input[name=add]'，function（）上
{
var last=$（'table tbody tr:last'）；
var值；
last.clone（true）.insertAfter（last）；
$（'table tbody tr:last'）
.find（'td:last'）
.html（“”）；
var col=last.find（'td'）；
各列（功能（索引、元素）{
if（$（this）.find（':text'）.length）
{
value=$（this.find（':text'）.val（）；
$（'table tbody tr:last'）
.find（'td'）。
等式（索引）.find（'input'）.val（值）；
}else if（$（this）.find（'select'）.length）
{
value=$（this.find（'select'）.val（）；
$（'table tbody tr:last'）
.find（'td'）.eq（索引）
.find（'select'）.val（值）；
}
});
});
$（'table'）。在（'click'，'btn'，function（）上{
$（this）.closest（'tr'）.remove（）；
});​

我已经使用了as

$。live

现在已折旧

---

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

$('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();
});​

$（'body'）。在（'click'，'input[name=add]'，function（）上
{
var last=$（'table tbody tr:last'）；
var值；
last.clone（true）.insertAfter（last）；
$（'table tbody tr:last'）
.find（'td:last'）
.html（“”）；
var col=last.find（'td'）；
各列（功能（索引、元素）{
if（$（this）.find（':text'）.length）
{
value=$（this.find（':text'）.val（）；
$（'table tbody tr:last'）
.find（'td'）。
等式（索引）.find（'input'）.val（值）；
}else if（$（this）.find（'select'）.length）
{
value=$（this.find（'select'）.val（）；
$（'table tbody tr:last'）
.find（'td'）.eq（索引）
.find（'select'）.val（值）；
}
});
});
$（'table'）。在（'click'，'btn'，function（）上{
$（this）.closest（'tr'）.remove（）；
});​

我已经使用了as

$。live

现在已折旧

---

不幸的是，jQuery clone没有深度复制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");
});​

---

不幸的是，jQuery clone没有深度复制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");
});​

---

我认为您不需要如此庞大的代码，请尝试以下方法：

$('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
});

​

据评论

$（'table'）。在（'click'，'input[name=add]'，function（）上{
var cloned=$（'table tbody tr:last'）。clone（true）；
cloned.find（'td:last'）.html（“”）；
$（'table tbody tr:last'）。查找（'select'）。每个（函数（）{
cloned.find（'select[name^='+this.name.replace（'[]'，'']+']'））.val（this.value）；
});
$（'table tbody'）。追加（克隆）；
});

---

我认为您不需要如此庞大的代码，请尝试以下方法：

$('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
});

​

据评论

$（'table'）。在（'click'，'input[name=add]'，function（）上{
var cloned=$（'table tbody tr:last'）。clone（true）；
cloned.find（'td:last'）.html（“”）；
$（'table tbody tr:last'）。查找（'select'）。每个（函数（）{
cloned.find（'select[name^='+this.name.replace（'[]'，'']+']'））.val（this.value）；
});
$（'table tbody'）。追加（克隆）；
});

---

您需要为新行设置输入值吗？我的印象是

.clone（）

还是复制了它们。@JamWaffles jQuery不会将上一个值设置为克隆的输入，这是一个错误。请检查此项。您将看到一些输入没有设置update@user1432059请您解释一下这个问题好吗？添加一行后，每行最后一个td上都会显示一个按钮（最后一行除外）其中名称与我在javascript中编写的名称不同！并且每一新行的值与上一行的值不同！@user1432059正常工作，最后一个按钮的值是多少？您需要为新行设置输入值吗？我的印象是

.clone（）

还是复制了它们。@JamWaffles jQuery不会将上一个值设置为克隆的输入，这是一个错误。请检查此项。您将看到一些输入没有设置update@user1432059请您解释一下这个问题好吗？在您添加了一行之后，会显示一个