0

tengo una función en Javascript la cual pretende mostrar en un alert el valor del campo en una tabla, es decir, asociar cada botón con el valor correspondiente a su fila, cabe aclarar que dicha tabla la genero dinamicamente con PHP al terminar de cargar el DOM. supongo que el problema esta en que al asociar el evento click del botón aun no existe dicha tabla, no se como referenciar eventos a elementos dinámicos.

Necesito aprender a hacerlo con javascript puro, sin JQuery

Codigo PHP que genera dicha tabla:

foreach($dataEsc as $de){ echo '
<tr>
  <td>'.$de->ID_ESC.'</td>
  <td>'.$de->CLAVECCT.'</td>
  <td>'.$de->C_NOMBRE.'</td>
  <td>'.$de->CV_TIPO.'</td>
  <td><button class="cct">Obtener CCT</button></td>
  <td>
    <select class "disableBoton">
      <option class="" value="1">Enviar</option>
      <option class="" value="2">No Enviar</option>
    </select>
  </td>
</tr>'; 
}

Función Javascript:

const buttonFile = document.getElementsByClassName("cct");

if (buttonFile && buttonFile.length > 0) {
  for (let i = 0; i < buttonFile.length; i++) {
    buttonFile[i].document.addEventListener("click", showCCT)
  }
}


function showCCT(e) {
  e.preventDefault();
  const documento = e.target.parentNode.parentNode.children[1].textContent;
  alert(documento);
}

Elemento donde pinto la tabla HTML:

<body>
  <h4>CONTENIDO</h4>
  <div id="tabla">

  </div>
</body>

Espero puedan ayudarme, gracias.

2 respuestas 2

1

Para esto se usa la delegación de eventos. Esto no significa más que en lugar de ligar el evento al botón en concreto, lo vas a signar a un elemento padre que sí que se cargue en el DOM (para tu caso "#tabla").

Luego dentro de la función que maneja el evento, puedes obtener el elemento que se ha clicado, y filtrarlo por si es un botón.

/**
 * Función que devuelve el HTML de un selector dado
 * @param {Sting} selector Cadena de texto que representa el selector a buscar
 * @returns {Object} Elemento del DOM
 */
const $ = (selector) => document.querySelector(selector)
/**
 * Esto sería lo mismo que:
 * function $(selector) {
 *     return document.querySelector(selector)
 * }
 */

/**
 * Función que aplica la lógica a los botones cargados fuera del DOM principal
 * @param {Object} e Evento que se captura
 */
function handleButtonClick(e) {
    // Obtenemos el elemento que lanza el evento -> (elemento clickado)
    const target = e.target
    if (target.tagName === "BUTTON" // Comprobamos que el elemento que ha lanzado el evento es un botón
        && target.classList.contains('a') // Y que contiene (para mi caso) la clase 'a'
    ) {
        // Escribimos lo que queremos hacer cuando se clicke el botón
        console.log('Botón con la clase "a"!')
        //  code ...
    }
}
/**
 * 1 - Obtenemos el elemnto del DOM con la arrow function que hemos creado arriba: $(selector)
 * 2 - Le añadimos el evento
 * 2.1 - Especificamos que evento queremos capturar
 * 2.2 - Ponemos qué función queremos llamar al hacer click
 */
$("#lista").addEventListener('click', handleButtonClick, true)
<ul id="lista">
    <li class="elem-1"><button class="a">a</button></li>
    <li class="elem-2"><button>b</button></li>
    <li class="elem-3"><button>c</button></li>
    <li class="elem-4"><button>d</button></li>
</ul>

En este ejemplo simplificado ves como el evento click se asocia al con el id "lista", y cuando se clicka, en la función podemos obtener el elemento que se ha clickado.

¡OJO! Es importante filtrar de alguna forma el target, porque si este evento lo asociamos a una tabla por ejemplo, clickemos donde clickemos se va a lanzar el evento, y en tu caso, solo quieres que se lance cuando se clicke el botón.

Para tu caso sería algo como:

function showCCt(e) {
    const target = e.target
    // Filtrar para solo obtener los elementos a los que les queremos aplicar la
    // lógica
    if (target.tagName === "BUTTON"
        && target.classList.contains('cct')
    ) { 
        const documento = e.target.parentNode.parentNode.children[1].textContent;
        alert(documento);
    }
}

document.getElementById('tabla').addEventListener('click', showCCt, true)

Te recomiendo buscar documentación sobre la delegación de eventos... bueno, más bien sobre eventos que es donde recae la importancia de este problema.

Un saludo y espero que te sirva!

4
  • Hermano muchísimas gracias, tal cual lo que necesitaba, si no es mucho pedir, podrías comentar o describir las lineas de código o en un párrafo lo que hacen, esto lo hago para seguir aprendiendo y desconozco algunas cosas, por lo regular lo hago con JQuery que es menos complicado y estoy practicando js para evitar librerías. Como puedes observar tu código al que tenia yo, cambio prácticamente todo. Commented el 23 jun. 2022 a las 18:26
  • Bro ya lo comprendí, solo mi duda es con el true?, porque?. Commented el 23 jun. 2022 a las 18:30
  • 1
    Es por una cosa que se llama event bubbling, te dejo una respuesta que te lo explica (stackoverflow.com/questions/7398290/…) pero básicamente viene a decir que si ese parámetro lo pones en 'false' y hay otros eventos añadidos a las etiquetas padre del botón (para tu caso) se ejecutarían todos esos eventos, poniendo el 3 parámetro en true solo se queda en el evento del elemento que lo ha lanzado.
    – IamDavid
    Commented el 23 jun. 2022 a las 18:47
  • Excelente bro... Commented el 23 jun. 2022 a las 18:58
1

Puede hacerlo de esta forma: ponerle un id al body de la tabla y a partir de ahí jugar con las posiciones de las filas como si fuera un arreglo entonces en este ejemplo el botón lo tengo en la celda 3 , es decir cell[2] pero en su caso debe poner la posición donde coloque el botón que según su html es la posición 4 (cell[4]) y a esa posición crearle el evento que muestra las otras celdas cell[3] , cell[2] etc...

window.addEventListener('load',(e)=>{
    e.preventDefault()
    getCCTS()
})
function getCCTS() {
    try {
        var body=document.getElementById('body')
        var rows=body.getElementsByTagName('tr')

        if (typeof rows === 'undefined') {
            console.log('rows are undefined')
            return false
        }

        if (typeof rows === 'null') {
            console.log('rows are null')
            return false
        }
        if (rows.length < 1) {
            console.log('rows are undefined')
            return false
        }

        for (let index = 0; index < rows.length; index++) {
            let row = rows[index];
            let cells=row.getElementsByTagName('td')
            cells[2].addEventListener('click',(e)=>{
                e.preventDefault()
                alert("column1= "+cells[0].innerText+" column2 ="+cells[1].innerText)
            })
        }
    } catch (error) {
       console.log(error)
       return false
    }

    return true
}
<table>
    <th>
        <tr>
            <td><strong>some data</strong></td>
            <td><strong>some dada</strong></td>
            <td><strong>button</strong></td>
        </tr>
    </th>
    <tbody id="body">
        <tr>
            <td>cct name1</td>
            <td>cct description1</td>
            <td><button>button</button></td>
        </tr>
        <tr>
            <td>cct name2</td>
            <td>cct description2</td>
            <td><button>button</button></td>
        </tr>
        <tr>
            <td>cct name3</td>
            <td>cct description3</td>
            <td><button>button</button></td>
        </tr>
    </tbody>
</table>

1
  • También muy buena tu respuesta bro, gracias por tu tiempo, por lo que entiendo valida cada fila, pero no comprendo bien si es el hecho de que exista el tr, o que ese tr tenga valor?. Si no me equivoco también en la variable cells accedes con la posición "2" al tr donde se encuentra el boton verdad? Commented el 23 jun. 2022 a las 19:08

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.