Skip to main content
adicionou 15 caracteres ao conteúdo; título editado
Fonte Link
Caique Romero
  • 7,2mil
  • 2
  • 24
  • 51

Remover Como posso remover linha de tabela com jQuery

Boas. Novo em jQueryCriei uma tabela com este código paradois botões um tem como função adicionar novas linhas a uma tabela e pretendo, também, remover linhasoutro remove-las.

Testei desta forma e apenas consigo adicionar mas paranovas linhas, quando tento remover tenho esteacontece um erro.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

Remover linha de tabela com jQuery

Boas. Novo em jQuery com este código para adicionar linhas a uma tabela e pretendo, também, remover linhas.

Testei desta forma e apenas consigo adicionar mas para remover tenho este erro.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

Como posso remover linha de tabela com jQuery

Criei uma tabela com dois botões um tem como função adicionar novas linhas a tabela e outro remove-las.

Testei desta forma e apenas consigo adicionar novas linhas, quando tento remover acontece um erro.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

adicionou 2 caracteres ao conteúdo
Fonte Link
Groot
  • 144
  • 14

Boas. Novo em jQuery com este código para adicionar linhas a uma tabela e pretendo, também, remover linhas.

Testei desta forma e apenas consigo adicionar emas para remover tenho este erro.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

Boas. Novo em jQuery com este código para adicionar linhas a uma tabela e pretendo, também, remover linhas.

Testei desta forma e apenas consigo adicionar e para remover tenho este erro.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

Boas. Novo em jQuery com este código para adicionar linhas a uma tabela e pretendo, também, remover linhas.

Testei desta forma e apenas consigo adicionar mas para remover tenho este erro.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

Adicionando o jQuery no código.
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

remover Remover linha de tabela com jqueryjQuery

Boas. Novo em jQuery com este código para adicionar linhas a uma tabela e pretendo, também, remover linhas.

Testei desta forma e apenas consigo adicionar e para remover tenho este erro.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

remover linha de tabela com jquery

Boas. Novo em jQuery com este código para adicionar linhas a uma tabela e pretendo, também, remover linhas.

Testei desta forma e apenas consigo adicionar e para remover tenho este erro.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

Remover linha de tabela com jQuery

Boas. Novo em jQuery com este código para adicionar linhas a uma tabela e pretendo, também, remover linhas.

Testei desta forma e apenas consigo adicionar e para remover tenho este erro.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

Fonte Link
Groot
  • 144
  • 14
Carregando