1

私のスクリプトでは、ユーザーが「追加」ボタンをクリックしたときにテーブル行を追加し、新しいテーブル行 (入力ボックスとドロップダウン選択がある人) の値を古い最後の行と同じに設定したいと考えています。このスクリプトを試してみますが、失敗します:

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

3 に答える 3

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います。

働くフィドル

于 2012-06-02T08:06:43.120 に答える
1

残念ながら、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/

于 2012-06-02T08:37:29.907 に答える
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
});

デモ

</p>

コメントによると

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

デモ

于 2012-06-02T08:39:45.390 に答える