Como adicionar / remover linhas de tabela dinamicamente usando jQuery?
Neste artigo, aprenderemos como adicionar / remover dinamicamente linhas de uma tabela HTML usando jQuery. Antes de ler este artigo, certifique-se de ter algumas idéias básicas sobre jQuery. Caso contrário, você pode aprender nos links mencionados abaixo.
Código HTML: vamos começar definindo a estrutura HTML básica da página da web.
<body>
<div class="container pt-4">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">Row Number</th>
<th class="text-center">Remove Row</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<button class="btn btn-md btn-primary"
id="addBtn" type="button">
Add new Row
</button>
</div>
</body>Inicialmente, a tabela está vazia e não possui linhas. Começaremos adicionando linhas dinamicamente dentro do corpo da tabela e então veremos como remover uma linha da tabela.
Adicionando uma linha:
Para adicionar uma linha, defina uma variável que mantenha a contagem do número total que agora existe na tabela. Em seguida, usaremos o evento “click” do jQuery para detectar um clique no botão adicionar linha e, em seguida, usaremos o método .append() do jQuery para adicionar uma linha na tabela. Cada elemento de linha foi atribuído a um id Ri que usaremos posteriormente para excluir uma linha. Cada elemento possui uma coluna de índice de linha e remove a coluna de botão. O código é o seguinte.
// Node.js program to demonstrate the
// Node.js filehandle.read() Method
// Denotes total number of rows.
var rowIdx = 0;
// jQuery button click event to add a row.
$('#addBtn').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<p>Row ${rowIdx}</p></td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove</button>
</td>
</tr>`);
});Nota: O `R ${var}` é uma forma de concatenar uma variável com uma string na nova sintaxe do JavaScript ES6.
Removendo uma linha: Remover uma linha é um pouco complicado. Existem dois problemas. Em primeiro lugar, como cada linha está sendo adicionada dinamicamente, não podemos detectar o clique de um botão remover diretamente usando o evento jQuery “click”, pois é uma ligação “direta” que anexará o manipulador a elementos já existentes. Não ficará limitado aos elementos futuros. Em segundo lugar, quando excluímos uma linha, precisamos manter o índice, ou seja, se excluirmos a segunda linha, a terceira linha se torna a segunda e, portanto, precisamos modificar o id e o texto do índice da linha.
Para resolver o primeiro problema, usaremos a delegação e, em seguida, podemos lidar com os eventos de um elemento adicionado dinamicamente.
Para resolver o segundo problema, obteremos todas as linhas próximas à linha onde o botão remover é clicado usando o método .nextAll() de jQuery e, em seguida, iteraremos em cada um desses elementos para modificar o índice e a id da linha. O código é o seguinte:
// Node.js program to demonstrate the
// Node.js filehandle.read() Method
// jQuery button click event to remove a row
$('#tbody').on('click', '.remove', function () {
// Getting all the rows next to the
// row containing the clicked button
var child = $(this).closest('tr').nextAll();
// Iterating across all the rows
// obtained to change the index
child.each(function () {
// Getting <tr> id.
var id = $(this).attr('id');
// Getting the <p> inside the .row-index class.
var idx = $(this).children('.row-index').children('p');
// Gets the row number from <tr> id.
var dig = parseInt(id.substring(1));
// Modifying row index.
idx.html(`Row ${dig - 1}`);
// Modifying row id.
$(this).attr('id', `R${dig - 1}`);
});
// Removing the current row.
$(this).closest('tr').remove();
// Decreasing the total number of rows by 1.
rowIdx--;
});Este código pode ser modificado de várias maneiras de acordo com as necessidades. Por exemplo, você pode tentar corrigir a primeira linha da tabela, de forma que sempre exista pelo menos uma linha dentro do corpo da tabela. Não se deve conseguir excluir a linha se a contagem de linhas for um.
Código final: o código a seguir é a combinação das seções acima.
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<script>
$(document).ready(function () {
// Denotes total number of rows
var rowIdx = 0;
// jQuery button click event to add a row
$('#addBtn').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<p>Row ${rowIdx}</p>
</td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove</button>
</td>
</tr>`);
});
// jQuery button click event to remove a row.
$('#tbody').on('click', '.remove', function () {
// Getting all the rows next to the row
// containing the clicked button
var child = $(this).closest('tr').nextAll();
// Iterating across all the rows
// obtained to change the index
child.each(function () {
// Getting <tr> id.
var id = $(this).attr('id');
// Getting the <p> inside the .row-index class.
var idx = $(this).children('.row-index').children('p');
// Gets the row number from <tr> id.
var dig = parseInt(id.substring(1));
// Modifying row index.
idx.html(`Row ${dig - 1}`);
// Modifying row id.
$(this).attr('id', `R${dig - 1}`);
});
// Removing the current row.
$(this).closest('tr').remove();
// Decreasing total number of rows by 1.
rowIdx--;
});
});
</script>
</head>
<body>
<div class="container pt-4">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">Row Number</th>
<th class="text-center">Remove Row</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<button class="btn btn-md btn-primary"
id="addBtn" type="button">
Add new Row
</button>
</div>
</body>
</html>
HTML é a base das páginas da web, é usado para o desenvolvimento de páginas da web por meio da estruturação de sites e aplicativos da web. Você pode aprender HTML desde o início seguindo este tutorial de HTML e os exemplos de HTML .
CSS é a base das páginas da web, é usado para desenvolvimento de páginas da web estilizando sites e aplicativos da web. Você pode aprender CSS desde o início, seguindo este tutorial CSS e exemplos de CSS .
jQuery é uma biblioteca JavaScript de código aberto que simplifica as interações entre um documento HTML / CSS. É amplamente conhecida por sua filosofia de “Escreva menos, faça mais” .
Você pode aprender jQuery desde o início, seguindo este Tutorial jQuery e Exemplos de jQuery .
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva
