2

Tengo un inconveniente, como puedo generar un contador para cada fila, que se cree al momento de dar "click" en un botón.
Mi código actual lo que hace es simplemente añadir una fila o eliminarla.
Pero tengo problemas al colocar un contador y empezar a contar las filas, porque si elimino una fila el contador no se resetea.
Un ejemplo...

Fila 1
Fila 2
Fila 3....

Si elimino digamos la fila 2 quedaría...

Fila 1
Fila 3...

Y no quiero eso, quiero que quede ...

Fila 1
Fila 2...

Que se resetee el contador.

Por favor si alguien me ayudará.

Este es mi código HTML

<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 <img class="img-fluid" style="height: 35px;" src="{{asset('images/iconos/dolar.png')}}" alt="dolar"></th>
                          <th class="align-text-top text-sm" scope="col">Costo total US <img class="img-fluid" style="height: 35px;" src="{{asset('images/iconos/dolar.png')}}" alt="dolar"></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"></th>
                        </tr>
                      </thead>
                      <tbody class="text-sm" id="list-materials">                                             
                      </tbody>
                    </table>
Seleccionar... Tubos Láminas Item Descripción Cantidad Pulgadas ''introducir el código aquí Total material Precio.unit US Costo total US

Este es mi código Javascript

let count = 0;

function add_material_product() {    
    let selectMaterial = document.getElementById('material').value;
    let tableBody = document.getElementById('list-materials');    

    if (tableBody.rows.length >= 2) {
        alert("No se puede agregar mas elementos");
    }
    else {
        if (selectMaterial == 1) {
            let newRow = tableBody.insertRow(-1);
            count++;
            console.log(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)
    }    
}
5
  • 1
    Buen día, ¿podrías adjuntar tu HTML?. Recuerda agregar un ejemplo mínimo y verificable para que podamos reproducir tu código. el 20 mar. a las 18:29
  • acabo de agregar el codigo HTML de la tabla, mi codigo permite agregar y eliminar filas pero al momento de eliminar el contador no mantiene su secuencia, como podria formularlo para que se resetee una vez eliminado una fila. el 20 mar. a las 18:42
  • Tu usas tableBody.rows.length que es el equivalente al contador que necesitas.... o es otra cosa lo que buscas?
    – Yussef
    el 20 mar. a las 19:11
  • ¿Cómo agregas las filas?, ¿Cómo ejecutas esas funciones?, ¿Qué vendría a ser selectMaterial?, reitero, agrega un ejemplo mínimo y verificable. el 20 mar. a las 19:16
  • Modifique el codigo con esa parte del contador, pero solo me permite eliminar la utlima fila de la tabla, cuando quiero eliminar cualquier fila no lo hace, solo afecta a la ultima fila. – Jonathan Sandoval ahora el 20 mar. a las 23:49

1 respuesta 1

2

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>

7
  • Modifique el codigo con esa parte del contador, pero solo me permite eliminar la utlima fila de la tabla, cuando quiero eliminar cualquier fila no lo hace, solo afecta a la ultima fila. el 20 mar. a las 23:48
  • Entonces supondré que el botón de eliminar es ese ícono de eliminar que tienes en tu tabla. Entonces, lo que quieres es que elimine la fila del que tu le des al ícono, cierto? ahí cambiaría un poco la lógica, me confirmas. el 21 mar. a las 0:29
  • Si estimado, el icono de tacho cuando le de click elimine cualquier fila elegida, mas con el codigo actual solo me permite eliminar el ultimo registro. Como podria aplicarlo porfas un ejemplo como guiarme o como cambiaria el codigo con esa funcion de eliminar fila a eleccion el 21 mar. a las 0:32
  • xd gracias por su tiempo estare pendiente al comentario proximo con su apoyo igual seguira avanzando otros puntos, porfas si me apoyaria en esa parte el 21 mar. a las 0:36
  • 1
    Cris223511.dev, muchas gracias me ayudo mucho el codigo y entendi mejor la logica que aplicas para poder setear los items, me falta aprender varios metodos de js no sabia de getElementsByTagName y e.parentNode.parentNode; en cuando usarlos. el 21 mar. a las 15:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.