Intentaré reproducir tu código. Debido a que nunca sabemos que es selectMaterial
, voy a omitirlo, ya que aquí el caso sería el contador de tus filas.
Entonces, creé dos botones para ejecutar tus funciones e importé las librerías necesarias para visualizar los íconos y el diseño de Bootstrap, el código vendría a ser este:
let count = 0;
function add_material_product() {
let tableBody = document.getElementById('list-materials');
if (tableBody.rows.length >= 2) {
alert('No se puede agregar mas elementos');
} else {
let newRow = tableBody.insertRow(-1);
count++;
newRow.innerHTML = '<th scope="row">' + count + '</th><td>Tubos</td>';
}
}
function delete_row_material() {
let tableBody = document.getElementById('list-materials');
let rowCount = tableBody.rows.length;
if (rowCount >= 1) {
tableBody.deleteRow(rowCount - 1);
}
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="p-4">
<button onclick="add_material_product()">Agregar elemento</button>
<button onclick="delete_row_material()">Eliminar elemento</button>
<table class="table table-bordered table-hover text-center">
<thead style="color:#ffffff; background-color: rgb(33,136,201)">
<tr>
<th class="align-text-top text-sm" scope="col">Item</th>
<th class="align-text-top text-sm" scope="col">Descripción</th>
<th class="align-text-top text-sm" scope="col">Cantidad</th>
<th class="align-text-top text-sm" scope="col">Pulgadas</th>
<th class="align-text-top text-sm" scope="col">Total material</th>
<th class="align-text-top text-sm" scope="col">Precio unit US</th>
<th class="align-text-top text-sm" scope="col">Costo total US</th>
<th class="align-text-top text-sm" scope="col"><i class="fas fa-check text-white"></i></th>
<th class="align-text-top text-sm" scope="col"><i class="fas fa-trash-alt"></i></th>
</tr>
</thead>
<tbody class="text-sm" id="list-materials">
</tbody>
</table>
</div>
<br><br>
<script src="https://kit.fontawesome.com/4d529f15e3.js" crossorigin="anonymous"></script>
Aquí vemos que al agregar dos filas, luego eliminar una, y luego volver a agregar otra fila, continúa en el número 3
y no se mantiene en el 2
(ya que sería la fila número 2
), y este es el problema que tienes.
Sucede que estás haciendo un contador que va a incrementar cada vez que entre a tu condición else
y, debido a esto, cuando elimines y vuelves a insertar, tu variable count
seguirá incrementando, sucesivamente:
else {
let newRow = tableBody.insertRow(-1);
count++; // aumento el contador para la siguiente fila
newRow.innerHTML = '<th scope="row">' + count + '</th><td>Tubos</td>';
}
Entonces, la solución sería contar el número de filas y esa cantidad de filas lo ponemos en siguiente fila, es decir, primero agregas, luego cuentas las filas y esa cantidad de filas lo pones como el item de la fila agregada, así:
else {
let newRow = tableBody.insertRow(-1); // inserto fila
let count = tableBody.rows.length; // cuento las filas
newRow.innerHTML = '<th scope="row">' + count + '</th><td>Tubos</td>'; // y lo que conté, agrego en la columna item de la fila
}
Código completo:
function add_material_product() {
let tableBody = document.getElementById('list-materials');
if (tableBody.rows.length >= 2) {
alert('No se puede agregar mas elementos');
} else {
let newRow = tableBody.insertRow(-1);
let count = tableBody.rows.length;
newRow.innerHTML = '<th scope="row">' + count + '</th><td>Tubos</td>';
}
}
function delete_row_material() {
let tableBody = document.getElementById('list-materials');
let rowCount = tableBody.rows.length;
if (rowCount >= 1) {
tableBody.deleteRow(rowCount - 1);
}
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="p-4">
<button onclick="add_material_product()">Agregar elemento</button>
<button onclick="delete_row_material()">Eliminar elemento</button>
<table class="table table-bordered table-hover text-center">
<thead style="color:#ffffff; background-color: rgb(33,136,201)">
<tr>
<th class="align-text-top text-sm" scope="col">Item</th>
<th class="align-text-top text-sm" scope="col">Descripción</th>
<th class="align-text-top text-sm" scope="col">Cantidad</th>
<th class="align-text-top text-sm" scope="col">Pulgadas</th>
<th class="align-text-top text-sm" scope="col">Total material</th>
<th class="align-text-top text-sm" scope="col">Precio unit US</th>
<th class="align-text-top text-sm" scope="col">Costo total US</th>
<th class="align-text-top text-sm" scope="col"><i class="fas fa-check text-white"></i></th>
<th class="align-text-top text-sm" scope="col"><i class="fas fa-trash-alt"></i></th>
</tr>
</thead>
<tbody class="text-sm" id="list-materials">
</tbody>
</table>
</div>
<script src="https://kit.fontawesome.com/4d529f15e3.js" crossorigin="anonymous"></script>
Edit:
Respecto a la última observación, que consiste en que los botones estén en cada fila y que se elimine solo la fila correspondiente, lo que hice fue mover los botones (que estaban en tu cabecera) al cuerpo de la tabla (le di un poco de estilos):
newRow.innerHTML = `
<th scope="row">` + count + `</th>
<td>Texto</td>
<td>Texto</td>
<td>Texto</td>
<td>Texto</td>
<td>Texto</td>
<td>Texto</td>
<td style="color:#ffffff; background-color: rgb(33,136,201); gap: 10px;" class="d-flex justify-content-center align-items-center">
<i class="fas fa-check text-white"></i>
<a onclick="delete_row_material()"><i class="fas fa-trash-alt"></i></a>
</td>`;
Hasta aquí, al darle clic al ícono de eliminar, eliminará la última fila.
Empecemos con las lógicas:
Eliminar fila correspondiente:
Trabajemos con nodos. Primero, hay que pasar como parámetro a la fila que queremos eliminar, quedando tu botón de eliminar así:
<a onclick="delete_row_material(this)"><i class="fas fa-trash-alt"></i></a>
Y luego, obtenemos el elemento tr
de la fila que se va a eliminar con parentNode
y con removeChild()
eliminamos a ese tr
capturado (por el this
) del tbody
, eliminando así la fila correspondiente:
function delete_row_material(e) {
let tableBody = document.getElementById('list-materials');
let row = e.parentNode.parentNode; // Con "parentNode" navegamos en el DOM para encontrar la fila
tableBody.removeChild(row); // Y luego eliminamos la fila del cuerpo de la tabla
}
Actualizar los items de las filas:
Al eliminar cualquier fila, los número de los items deben ser actualizados, ya que, imagina que existen las filas 1
, 2
y 3
y elimino el 2
, la siguiente fila que agregue será 3
porque cuenta las filas, quedando 1
, 3
y 3
.
Entonces, fácilmente recorres todos los tr
, de cada tr
ingresas a la primera columna (que son tus items) y los modificas por las veces que itera los tr
(si son dos filas, sus items serán 1
y 2
, si son 3, serán 1
, 2
y 3
, sucesivamente:
function delete_row_material(e) {
let tableBody = document.getElementById('list-materials');
let row = e.parentNode.parentNode; // Con "parentNode" navegamos en el DOM para encontrar la fila
tableBody.removeChild(row); // Y luego eliminamos la fila del cuerpo de la tabla
let rows = tableBody.getElementsByTagName("tr"); // calculo cuantos tr hay para hacer los ciclos for en base a ello
for (let i = 0; i < rows.length; i++) {
let row = rows[i]; // ingreso a todos los rows
let items = row.getElementsByTagName("th")[0]; // y de todos los rows, ingreso a la primera columna ("items")
items.innerHTML = i + 1; // y todos los items los modifico
}
}
Código final:
function add_material_product() {
let tableBody = document.getElementById('list-materials');
if (tableBody.rows.length >= 5) {
alert('No se puede agregar mas elementos');
} else {
let newRow = tableBody.insertRow(-1);
let count = tableBody.rows.length;
newRow.innerHTML = `
<th scope="row">` + count + `</th>
<td>Texto</td>
<td>Texto</td>
<td>Texto</td>
<td>Texto</td>
<td>Texto</td>
<td>Texto</td>
<td style="color:#ffffff; background-color: rgb(33,136,201); gap: 10px;" class="d-flex justify-content-center align-items-center">
<i class="fas fa-check text-white"></i>
<a onclick="delete_row_material(this)"><i class="fas fa-trash-alt"></i></a>
</td>`;
}
}
function delete_row_material(e) {
let tableBody = document.getElementById('list-materials');
let row = e.parentNode.parentNode; // Con "parentNode" navegamos en el DOM para encontrar la fila
tableBody.removeChild(row); // Y luego eliminamos la fila del cuerpo de la tabla
let rows = tableBody.getElementsByTagName("tr"); // calculo cuantos tr hay para hacer los ciclos for en base a ello
for (let i = 0; i < rows.length; i++) {
let row = rows[i]; // ingreso a todos los rows
let items = row.getElementsByTagName("th")[0]; // y de todos los rows, ingreso a la primera columna ("items")
items.innerHTML = i + 1; // y todos los items los modifico
}
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="p-4">
<button onclick="add_material_product()">Agregar elemento</button>
<table class="table table-bordered table-hover text-center">
<thead style="color:#ffffff; background-color: rgb(33,136,201)">
<tr>
<th class="align-text-top text-sm" scope="col">Item</th>
<th class="align-text-top text-sm" scope="col">Descripción</th>
<th class="align-text-top text-sm" scope="col">Cantidad</th>
<th class="align-text-top text-sm" scope="col">Pulgadas</th>
<th class="align-text-top text-sm" scope="col">Total material</th>
<th class="align-text-top text-sm" scope="col">Precio unit US</th>
<th class="align-text-top text-sm" scope="col">Costo total US</th>
<th class="align-text-top text-sm" scope="col">Acciones</th>
</tr>
</thead>
<tbody class="text-sm" id="list-materials">
</tbody>
</table>
</div>
<script src="https://kit.fontawesome.com/4d529f15e3.js" crossorigin="anonymous"></script>
tableBody.rows.length
que es el equivalente al contador que necesitas.... o es otra cosa lo que buscas?selectMaterial
?, reitero, agrega un ejemplo mínimo y verificable.