1

estoy intentando agregar un tr a una tabla y dentro de este hay una columna que llevaria un array de inputs, entonces cuando agrego filas a la tabla y checo con un querySelector nada mas obtengo el primer input que genero con el html original

<table id="tableData" class="table table-hover table-sm text-center">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Material Type</th>
                  <th scope="col">Part Number</th>
                  <th scope="col">Part Number ( Descr )</th>
                  <th scope="col">Qty</th>
                  <th scope="col">Liability To: Wywinn (W)/ Customer (C )/ Other (Specify)</th>
                  <th scope="col">Reason for your request</th>
                  <th scope="col">Customer</th>
                  <th scope="col">PIC</th>
                </tr>
              </thead>
              <tbody id="tableBodyData">
                <tr>
                  <th scope="row"><input type="text" class="text-center"></th>
                  <td><input name="MaterialType[]"  type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                </tr>
              </tbody>
            </table>
<button id="btnSend" type="button" class="btn btn-outline-secondary">Send Request</button>

Y este es el codigo de javascript

const addRow = document.querySelector("#btnSend")
addRow.addEventListener("click", (e) => {
    const addRowTable = document.getElementById("tableData").insertRow(-1).innerHTML = "<tr><th scope="row"><input type="text" class="text-center"></th><td><input name="MaterialType[]" type="text" class="text-center"></td><td><input type="text" class="text-center"></td></tr>"
})

Entonces cuando intento obtener todos los inputs del mismo name solo obtengo el primero que se creo con el HTML

const inputs = document.querySelectorAll("input[name='MaterialType[]']")
0

1 respuesta 1

1

Creo que el problema es por el momento en que obtienes los inputs, seguramente lo haces solo al cargar la página, pero no cuando agregas otros. querySelectorAll() solo toma los elementos existentes y no "escucha" cuando se crean nuevos.

Hay opciones para observar cambios en el DOM, pero, para este caso, me parece más práctico actualizar la variable cada que agregues (o elimines) una fila de la tabla.

Adicionalmente, te recomiendo usar plantillas de texto para cadenas muy largas (HTML de la fila), ayudando a que el código sea más legible y, de ser necesario, también se pueden incluir variables. Solo necesitas encerrar el contenido entre backticks o acentos graves `

Por cierto, no es necesario (ni conveniente) incluir <tr> ni </tr>, porque forman parte de la fila creada y puedes comprobarlo con la propiedad outerHTML.

const addRow = document.querySelector("#btnSend");
// Constante para la tabla
const tableData = document.querySelector('#tableData');
// Variable para los inputs, porque se va a actualizar
let inputs = tableData.querySelectorAll('[name="MaterialType[]"]');
addRow.addEventListener("click", e => {
    // Separar creación de contenido
    const addRowTable = tableData.insertRow(-1);
    // Ya tiene <tr> y </tr>
    console.log(addRowTable.outerHTML);
    addRowTable.innerHTML = `
        <th scope="row">
            <input type="text" class="text-center">
        </th>
        <td>
            <input name="MaterialType[]" type="text" class="text-center">
        </td>
        <td>
            <input type="text" class="text-center">
        </td>`;
    // Actualizar arreglo de inputs, buscando solo en la tabla
    inputs = tableData.querySelectorAll('[name="MaterialType[]"]');
    console.log(inputs);
});

// "Delegar" evento "onchange" a la tabla
// La variable e contiene el evento
// e.target es el elemento que cambió
tableData.addEventListener('change', e => {
    // Analizar si es uno de los campos deseados
    if(e.target.name && e.target.name == 'MaterialType[]') {
        // El cambio fue en un campo de Material Type, tomar el valor
        let value = e.target.value;
        // Mostrar en consola
        console.log(value);
    }
});
<table id="tableData" class="table table-hover table-sm text-center">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Material Type</th>
                  <th scope="col">Part Number</th>
                  <th scope="col">Part Number ( Descr )</th>
                  <th scope="col">Qty</th>
                  <th scope="col">Liability To: Wywinn (W)/ Customer (C )/ Other (Specify)</th>
                  <th scope="col">Reason for your request</th>
                  <th scope="col">Customer</th>
                  <th scope="col">PIC</th>
                </tr>
              </thead>
              <tbody id="tableBodyData">
                <tr>
                  <th scope="row"><input type="text" class="text-center"></th>
                  <td><input name="MaterialType[]"  type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                  <td><input type="text" class="text-center"></td>
                </tr>
              </tbody>
            </table>
<button id="btnSend" type="button" class="btn btn-outline-secondary">Send Request</button>

Edición:

No necesariamente debes escuchar los cambios en cada campo, puedes "delegarlo", es decir, que otro elemento sea el encargado de capturar el evento y ahí analices si el cambio fue en uno de esos campos para aplicar las acciones necesarias. Al final del script incluí un ejemplo funcionando.

6
  • Gracias por tu respuesta, aun con esta linea se puede obtener los cambios de un evento? let inputs = tableData.querySelectorAll('[name="MaterialType[]"]') porque cuando activo un evento onchange solo dectecta el primer input Commented el 27 ene. 2022 a las 18:42
  • @VictorGarcia, en el fragmento de código funciona, habría que ver cómo tienes ese evento, seguramente lo asignas solo al cargar la página y, tal vez, sería conveniente "delegarlo" para poder aplicar tanto a elementos existentes como a los que se agreguen posteriormente.
    – Triby
    Commented el 27 ene. 2022 a las 18:46
  • @VictorGarcia, actualicé la respuesta para que veas cómo puedes escuchar los eventos en todos los campos, sin importar si existen desde que carga la página o los agregas después.
    – Triby
    Commented el 27 ene. 2022 a las 18:59
  • Gracias , es que yo lo hacia desde aqui inputs.forEach(input => input.addEventListener('change', app)); Commented el 27 ene. 2022 a las 19:07
  • @VictorGarcia, sí lo supuse, pero no es conveniente de esa forma, porque habría que asignar evento cada que se agregan filas, por eso la sugerencia de hacerlo por medio de la tabla.
    – Triby
    Commented el 27 ene. 2022 a las 19:09

Tu Respuesta

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

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