Actualizar identificador en elementos de tabla HTML al eliminar filas intermedias.

Actualización de ID en Elementos de Tabla HTML al Eliminar Filas Intermedias

En la función actual, cuando se elimina una fila del medio de una tabla, los IDs de las filas restantes no se actualizan correctamente. Este problema surge porque los IDs de las casillas de verificación dentro de las filas no se reajustan después de eliminar una fila, lo que puede causar conflictos o inconsistencias.

Funciones Existentes

• addRow(): Esta función añade una nueva fila al final de la tabla.
• deleteRow(): Esta función elimina las filas seleccionadas por el usuario.

Problema

Al eliminar una fila intermedia, por ejemplo, la fila 2 de 3 disponibles, el ID de la fila 3 no se actualiza, lo que lleva a tener IDs duplicados o incorrectos. Se necesita una solución para actualizar los IDs de las filas restantes después de la eliminación.

Solución Propuesta

Para solucionar este problema, se debe implementar una función adicional que actualice los IDs de las filas restantes después de que se eliminen las filas seleccionadas. Esto puede hacerse dentro de la función deleteRow(), justo después de eliminar las filas.

Aquí está la implementación corregida:

function deleteRow() {
  const checkboxes = document.querySelectorAll(".row-cb");

  const userConfirm = confirm("Are you sure?");
  if (!userConfirm) return;

  checkboxes.forEach((checkbox) => {
    if (checkbox.checked) {
      const row = checkbox.closest('tr');
      row.remove();
    }
  });

  updateRowIds();
}

function updateRowIds() {
  const rows = document.querySelectorAll('#table1 tbody tr');
  rows.forEach((row, index) => {
    const inputs = row.querySelectorAll('input[type="checkbox"]');
    inputs.forEach((input, subIndex) => {
      input.id = `eval_cb${subIndex}_${index}`; // Actualiza el ID basado en el índice de fila y de sub-fila
      input.name = `eval_cb${subIndex}_${index}`;
      const label = row.querySelector(`label[for="${input.id}"]`);
      if (label) {
        label.setAttribute("for", input.id); // Actualiza el atributo 'for' del label
      }
    });
  });
}

Resumen

1. Eliminar Filas: Cuando se elimina una fila, se debe actualizar los IDs de las filas restantes.
2. Actualizar IDs: Agregue la función updateRowIds() que recorre todas las filas restantes y ajusta los IDs y nombres de las casillas de verificación.
3. Consistencia: Esta solución garantiza que siempre que se elimine una fila, las identificaciones de las filas restantes se mantendrán únicas y coherentes.

Con esta modificación, se resuelve el problema de los IDs no actualizados en los elementos de la tabla HTML al eliminar filas intermedias.