0

html、jqueryで動的行を追加および削除しました。

jsfiddle.net/gansai/p5QwC/1/

HTML：

<form action="grading.php" method="post">               
<table width="100%" id="tableRealizzazione">
    <tr>
        <th></th>
        <th style="padding:12px;text-align:center;">Serial No</th>
        <th style="padding:12px;text-align:center;">Personale</th>
        <th style="padding:12px;text-align:center;">Percentage</th>
        <th style="padding:12px;text-align:center;">Marketing point</th>
        <th style="padding:12px;text-align:center;">Add/Remove</th>
    </tr>

    <tr class="even">
        <td></td>
        <td>
            <input type="text" name="serial[]"  class="add increment" value="1">
        </td>
        <td style="padding:12px;">
            <input type="text" value="" name="Personale[]">
        </td>
        <td style="padding:12px;">
            <input type="text" name="from[]" size="5%"> -
            <input type="text" name="to[]" size="5%"> %
        </td>
        <td style="padding:12px;">
            <input type="text" class="totaliCostiGestione" name="marketpt[]">
        </td>
        <td style="padding:12px;">
            <input type="text" name="programid[]" class="add" value="34" size="10%">
        </td>
        <td style="padding:12px;">
            <input type="button" class="addnew add" value="+" />
        </td> 
    </tr>
    <tr>
        <td>
            <input type="submit" name="submit" value="submit">
        </td>
    </tr>                     
</table>

</ p>

jQuery：

    $('.addnew').live('click', function(){
var thisRow = $(this).parent().parent();
newRow = thisRow.clone(true).insertAfter(thisRow);
newRow.find('input:not(.add)').val("");

$(this).removeClass('addnew').addClass('remove');
    $(this).val("-");
    newRow.find('input.increment').val(parseInt(thisRow.find('input.increment').val())+1);
});

$('.remove').live('click', function(){
    $(this).parent().parent().remove();
});

しかし、同じボタンにアクションを追加/削除したいのですが。前の行の削除アイコンが表示される代わりに。

誰か提案できますか？

4

1 に答える 1

1

これがあなたが探しているものだと思いますが、そうでない場合はお知らせください。

    $('.addnew').live('click', function(){
    var thisRow = $(this).parent().parent();
    newRow = thisRow.clone(true).insertAfter(thisRow);
    newRow.find('input:not(.add)').val("");

    newRow.find('.addnew').removeClass('addnew').addClass('remove');
    newRow.find('.remove').val("-");
    newRow.find('input.increment').val(parseInt(thisRow.find('input.increment').val())+1);
});

$('.remove').live('click', function(){
    $(this).parent().parent().remove();
});

これにより、最初の行に+が保持され、複製された行に-ボタンが追加されます。

実用的な例については、 http：//jsfiddle.net/p5QwC/3/を参照してください。

アップデート

最初の行を削除したくないと仮定すると、おそらくこれがあなたが探しているものです。http://jsfiddle.net/p5QwC/10/

于 2012-11-09T14:32:15.217 に答える