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

时间:2012-06-02 07:41:25

标签: javascript jquery html5 html-table jquery-selectors

在我的脚本中,当用户点击“添加”按钮时,我会添加一个表行,并且我想将新表行的值(有输入框和dropbown选择的人)设置为旧表的行最后一排。 我会尝试这个脚本,但它失败了:

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

3 个答案:

答案 0 :(得分:2)

我认为你不需要这么大的代码,试试这个:

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

答案 1 :(得分:1)

以下是您可以使用的代码,您可以进一步优化,但它可以满足您的需求

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

答案 2 :(得分:1)

遗憾的是,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");
});​

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