2

Tengo la siguiente tabla

$("table > tbody > tr > td > button").click(function (e) { 
    e.preventDefault();
    alert("Click")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead id="Thead-rol">
<tr><th class="none">Dato1</th><th>Rol</th><th>Estatus</th><th>Editar</th></tr></thead>
<tbody id="Tbody-rol">
<tr><td class="none">Dato 1</td><td>Dato 2</td><td><button class="btn bg-success">Activo</button></td><th><button class="btn bg-warning"><i class="far fa-edit"></i></button></th> </tr></tbody>
<tfoot>
</tfoot>
</table>

Lo que busco es dar clic en el botón de la columna Estatus, el cual es un botón y obtener el dato 1

4 respuestas 4

1

No veo la necesidad de un selector tan largo considerando que:

  • Las celdas pueden tener clases que las identifiquen por grupos
  • O puedes aplicar un par de clases, una para el botón y otra para el Dato1
  • No requieres de JQuery para conseguir el resultado
  • Obtén a cada elemento como mencionamos por su clase y asignalos a variables
  • Al botón le das un listener en su evento click
  • Posterior cuando ese evento sea disparado, entonces mandas a imprimir la propiedad innerText de la celda que tiene el dato1

Propuesta:

    <table>
      <thead id="Thead-rol">
        <tr>
          <th class="none">Dato1</th>
          <th>Rol</th>
          <th>Estatus</th>
          <th>Editar</th>
        </tr>
      </thead>
      <tbody id="Tbody-rol">
        <tr>
          <td class="none">Dato 1</td>
          <td>Dato 2</td>
          <td>
            <button class="btn bg-success take-value">Activo</button>
          </td>
          <td>
            <button class="btn bg-warning"><i class="far fa-edit"></i>Otro </button>
          </td> 
        </tr>
      </tbody>
      <tfoot>
      </tfoot>
    </table>
    
    <script>
      let takeValue = document.querySelector('.take-value');
      let valorUno  = document.querySelector('.none');
      
      
      takeValue.addEventListener('click', () => {
        console.log(valorUno.innerText);
      });
    </script>

3
  • Creo que me falto explicar en el problema que la tabla será dinámica, y es por eso que buscaba que el selector obtuviera los datos de la fila. Commented el 5 oct. 2020 a las 5:15
  • osea que quieres que ese click funcione por cada botón y te ayude a obtener el valor de cada celda ?
    – user128299
    Commented el 5 oct. 2020 a las 5:16
  • @FernyCortez osea que quieres este mismo comportamiento pero por cada botón que tenga la tabla no?
    – user128299
    Commented el 5 oct. 2020 a las 5:17
1

para navegar a través de tu tabla utilizando JQuery necesitas asignar en este caso un id a tu tabla y ocupar la siguiente línea:

var temp = $('#tabla tbody tr').children(':first').html();

Esta buscará siempre el primer elemento de tu tabla. Tu código quedaría así:

$("table > tbody > tr > td > button").click(function (e) { 
    e.preventDefault();
    var temp = $('#tabla tbody tr').children(':first').html();
    alert("Clickeaste: " + temp);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='tabla'>
<thead id="Thead-rol">
<tr><th class="none">Dato1</th><th>Rol</th><th>Estatus</th><th>Editar</th></tr></thead>
<tbody id="Tbody-rol">
<tr><td class="none">Dato 1</td><td>Dato 2</td><td><button class="btn bg-success">Activo</button></td><th><button class="btn bg-warning"><i class="far fa-edit"></i></button></th> </tr></tbody>
<tfoot>
</tfoot>
</table>

1

Cuando se dispara el evento click, se pasa como argumento un objeto, que tiene como propiedad .target al elemento que lo disparó (el botón en el que hiciste click). En tu código:

e.target 

Primero estás buscando seleccionar el primer tr padre de este botón. Con .closest() lo obtenemos:

$(e.target).closest('tr').

Y luego el texto del primer td:

$(e.target).closest('tr').find('td:first').text()

$("table > tbody > tr > td > button").click(function(e) {
  e.preventDefault();
  let primeraColumna = $(e.target).closest('tr').find('td:first').text();
  console.log(primeraColumna)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead id="Thead-rol">
    <tr>
      <th class="none">Dato1</th>
      <th>Rol</th>
      <th>Estatus</th>
      <th>Editar</th>
    </tr>
  </thead>
  <tbody id="Tbody-rol">
    <tr>
      <td class="none">Dato 1</td>
      <td>Dato 2</td>
      <td><button class="btn bg-success">Activo</button></td>
      <td><button class="btn bg-warning"><i class="far fa-edit"></i></button></td>
    </tr>
    <tr>
      <td class="none">Dato 3</td>
      <td>Dato 4</td>
      <td><button class="btn bg-success">Activo</button></td>
      <td><button class="btn bg-warning"><i class="far fa-edit"></i></button></td>
    </tr>
    <tr>
      <td class="none">Dato 5</td>
      <td>Dato 6</td>
      <td><button class="btn bg-success">Activo</button></td>
      <td><button class="btn bg-warning"><i class="far fa-edit"></i></button></td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

0

Estoy llenando una tabla dinámica con la función .append() de JQuery (Se me facilita más para manipular el DOM como DOMString) por lo que tuve problemas para que me funcionara el Event Click de las respuestas anteriores, por lo que mi solución fue la siguiente:

Dado que estoy manipulando el DOMtuve que recurrir al siguiente evento, ya que la documentación que encontré dice que no tendría problemas al momento de actualizar mi DOM

$(selector).on(event,childSelector,function);

Solución:

 $("#Tbody").on("click", "tr > td > button", function() {

     var temp = $(this).closest('tr').find('td').eq(0).text();

      alert("Valor: "+temp);

  }

.closest(): busca el elemento mas cercano del selector que se le indica

.find(): Recorre todos los descendientes hacia abajo del selector indicado

.eq(): Se indica la posición del elemento a obtener

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.