0

boas. com este código consigo adicionar e remover linhas mas estou com dificuldade em trancar a primeira para que não seja eliminada. como posso fazer?

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).delegate( '.tr_clone_del', 'click', function () {
    var thisRow = $(this).closest("tr")[0];
    thisRow.remove();
});
<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>header1</td>
            <td>header2</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="tr_clone">
            <td>
            <select name="campo1[]">
            <option value="0">-</option>
            <option value="1">1</option>
            <option value="2">2</option>
            </select>
            </td>
            <td><input type="text" name="campo2[]" class="input" value="0"></td>
            <td><button alt="" class="tr_clone_add" style="cursor:pointer;" title="Adicionar">+</button></td>
            <td><button alt="" class="tr_clone_del" style="cursor:pointer;" title="Remover">-</button>
            </td>
        </tr>
    </table>

4
  • Se você colocar uma validação na function que exclui? Assim: if($('.tr_clone_del').length <= 1) return Me avise se funcionou, veja o exemplo aqui: jsfiddle.net/9vfxn201/1 22/03/2018 às 16:25
  • @RicardoPontual, perfeito, funcionou direitinho. Só uma duvida, ao adicionar nova linha, tem como no input manter o valor inicial 0?
    – Groot
    22/03/2018 às 16:35
  • @RicardoPontual, já fiz, nesta linha $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '0' );. valeu pela ajuda!
    – Groot
    22/03/2018 às 16:36
  • Que bom, eu ia postar uma resposta, mas já postaram a mesma solução, boa sorte com os códigos :) 22/03/2018 às 17:49

1 Resposta 1

0

Basta adicionar isso no seu método de exclusão, uma pequena verificação de quantos tr existem.

$(table).delegate( '.tr_clone_del', 'click', function () {
      if($('.tr_clone').length > 1) {
        var thisRow = $(this).closest("tr")[0];
        thisRow.remove();
      }
  });

Segue o exemplo completo.

$(function() {
	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).delegate( '.tr_clone_del', 'click', function () {
      if($('.tr_clone').length > 1) {
        var thisRow = $(this).closest("tr")[0];
        thisRow.remove();
      }
  });
})
<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>header1</td>
            <td>header2</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="tr_clone">
            <td>
            <select name="campo1">
            <option value="0">-</option>
            <option value="1">1</option>
            <option value="2">2</option>
            </select>
            </td>
            <td><input type="text" name="campo2" class="input"></td>
            <td><button alt="" class="tr_clone_add" style="cursor:pointer;" title="Adicionar">+</button></td>
            <td><button alt="" class="tr_clone_del" style="cursor:pointer;" title="Remover">-</button>
            </td>
        </tr>
    </table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .