0

Tengo un evento en jQuery, el cual al hacer clic sobre cierta fila de una tabla ejecuta una acción, está acción se realiza de manera correcta pero lo que necesito es que cuando el usuario de clic en cualquier fila de la columna # de mi tabla, no se ejecute la acción. Mi duda es:

  • ¿Cómo puedo realizar esto?

$(function() {
  $('#list > tbody > tr').click(function(){
    console.log('He dado clic.');
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-striped" id="list">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • No uses selectors tan genéricos, mejor utiliza clases e id, de esa manera le pones a todas las celdas clickeables una clase, y a las no clickeables no se las pones. el 18 abr. 2018 a las 18:25

2 respuestas 2

2

Suponiendo que la Columna # es la numero 1, puedes usar el selector td:not(:first-child) que aplica el evento a todas la celdas excepto al primer hijo:

$(function() {
  $('#list > tbody > tr > td:not(:first-child)').click(function(){
    console.log('He dado clic.');
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-striped" id="list">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • 2
    Una contribución para el caso que se quiera especificar la posición de la columna: "td:not(:nth-child(1))", en este ejemplo caso la primera. Saludos! el 18 abr. 2018 a las 19:27
-1

saludos puedes hacer de varias formas invocando la funcion en el tr ejemplo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-striped" id="list">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr  onclick="clickRow(event);">
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<script>
function clickRow(event){
alert("your click on specific row");
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

aqui hice la prueba prueba espero te sirva

2
  • No es lo que busco. Sigue ejecutando el evento al dar clic sobre la primera columna de la fila. Y funcionaria si coloco el onclick en las columnas que las necesitara pero serían muchas y lo considero como una mala práctica.
    – Hoose
    el 18 abr. 2018 a las 18:56
  • podrias agregar una clase css y validar si hizo click en un tr que tenga dicha clase mediante javascript el 18 abr. 2018 a las 18:58

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.