0

Es que tengo esta tabla y tengo la informacion lo que quiero es que al momento de presionar el boton del lapiz se mande el nombre de la fila donde se clickea al input text que esta en el modal pero quiero hacer la funcion una sola vez para no tener que crear una funcion para cada boton

<table id="example" class="table table-striped" style="width:100%">
    <thead>
        <tr>
          <th>Nombre</th>
          <th>Proyecto</th>
          <th>Acciones</th>
        </tr>
    </thead>
    <tbody id="jurados">
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td><button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#modifica"><i class="fas fa-pencil-alt"></i></button>
            <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#consulta"><i class="fas fa-search"></i></button>
            <button type="button" class="btn btn-danger" onclick="AlertaEliminar(this);"><i class="fas fa-trash-alt"></i></button></td>
      </tr>
      <tr>
        <td class="jurado">Garrett Winters</td>
        <td>Accountant</td>
        <td><button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#modifica"><i class="fas fa-pencil-alt"></i></button>
            <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#consulta"><i class="fas fa-search"></i></button>
            <button type="button" class="btn btn-danger" onclick="AlertaEliminar(this);"><i class="fas fa-trash-alt"></i></button></td>
      </tr>

introducir la descripción de la imagen aquí

Y el codigo del modal es este

<div class="modal-body">
        <div class="container">
          <br>
          <br>
          <div class="row"> 
            <div class="col-4">NOMBRE:</div>
            <div class="col-4">
              <form>
                    <div class="form-group">
                    <input type="text" name="mod_nombre" id="mod_nombre" />
                    </div>                               
              </form>
            </div>      
          </div>    
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="btn2">MODIFICAR</button>
        <button

Tenia una idea al utilizar el addeventlistener y querySelectorAll pero no se me ocurre una buena idea

const jurados = document.querySelectorAll("jurados");

jurados.addEventListener('click', (e) => {
    console.log(e.target);
    //texto.document.getElementById("mod_nombre").value = jurados;
});
4
  • Cuando dices "el nombre de la fila", te refieres en realidad a El nombre que aparece en el primer <td/> del <tr/>? Recuerda también que debes tomar en cuenta el caso que los rows pueden ser añadidos dinámicamente. Pero eso viene después.
    – Arriel
    Commented el 12 abr. 2022 a las 21:37
  • Si me refiero a lo que esta dentro del td pero en el caso de todos poder editar el nombre de cada uno de esa tabla con el boton Commented el 12 abr. 2022 a las 21:41
  • El evento se lo vas a agregar a cada uno de los botones con ícono de lápiz que está en la tabla jurados, para que cuando se haga click en él, obtengas el nombre del jurado y lo pases al input de tipo text que está en el modal que se levanta cuando haces click en el botón? Y además, vas a cambiar el nombre del jurado en la tabla cuando hagas click en el botón modificar? Ese es tu objetivo?
    – Arriel
    Commented el 12 abr. 2022 a las 21:47
  • Exactamente asi ocupo que funciona Commented el 12 abr. 2022 a las 21:54

1 respuesta 1

0

Primero que nada, esta no es la única solución, pero creo que te puede funcionar.

Hay varias observaciones que debo hacerte.

Primero: No está claro por qué utilizas

const jurados = document.querySelectorAll("jurados")

En todo caso, pudiste utilizar .getElementById('jurados'), .querySelectorAll te hubiese devuelto un arreglo de elementos HTML y no veo que tengas un arreglo de tablas de jurados, así que te hubiese complicado el asunto. Tal vez sí sea lo que necesites si vas a agregar eventos dinámicamente, pero no veo es el caso.

Segundo: Lo que necesitas es identificar los botones que editan. A parte de la clase bootstrap btn-ligth, no hay otra forma de saber que son los botones de edición, por lo tanto agregué la clase 'btn-editar', de esta manera podré obtener todos los botones con esa clase mediante el método document.querySelectorAll(".btn-editar").

Ahora que tengo todos los botones que editan, puedo agregar el evento a cada uno de ellos.

const buttons = document.querySelectorAll('.btn-editar');

buttons.forEach(b => {
    b.addEventListener('click', function (e){
    const nombreJurado = this.parentNode.parentNode.firstElementChild.textContent;
    const input = document.getElementById('mod_nombre');  //
    input.value = nombreJurado;
  });
})

La línea

const nombreJurado = this.parentNode.parentNode.firstElementChild.textContent;

es la que hace toda la magia:

Le estás diciendo "Encuentra el padre de este botón, y luego encuentra el padre de el TD que contiene este botón. Luego, obtiene el primer hijo, y devuelve el texto dentro de ese TD."

En este fiddle: https://jsfiddle.net/yh72498n/2/ puedes ver el método en acción.

2
  • Si me funcionooo gracias! Commented el 12 abr. 2022 a las 23:13
  • Lo unico que me faltaria ahora es que lo que esta escrito en el input se modifique en el texto de la linea donde presione el boton de editar, igual muchas gracias jajaj Commented el 13 abr. 2022 a las 6:59

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.