Get row item except for one column

Asked

Viewed 79 times

1

Hello!

I would like a help regarding the click on a table.

When I clicked on the row came the data of this row, except when clicked on a specific column (column 3 for example), because I want to do another action in the column in question.

To bring the table data I already have, it is only necessary to put in exception the column I would like.

Thanks... 

$("tr").on('click',function() {
   var tableData = $(this).children("td").map(function(){
                    return $(this).text();
                }).get(); 
                var codigo =  $.trim(tableData[0]) ;
                alert('Codigo: '+codigo);
                
 })
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<table class="table table-responsive table-hover">
  <thead>
    <th>ID</th>
    <th>Nome</th>
    <th>Status</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Carlos</td>
      <td>Ativo</td>
    </tr> 
    <tr>
       <td>2</td>
       <td>Charles</td>
       <td>Inativo</td>
    </tr> 
    <tr>
      <td>3</td>
      <td>Ozeias</td>
      <td>Ativo</td>
    </tr> 
  </tbody>
</table>

jquery html table

  • This exception column has some particular class?

  • has no. At least yet

2 answers

1


You can classify that column and delete it with

 if (e.target.classList.contains('excluir')) return;

Example:

$("tr").on('click', function(e) {
  if (e.target.classList.contains('excluir')) return;
  var tableData = $(this).find("td").map(function() {
    return $(this).text();
  }).get();
  var codigo = $.trim(tableData[0]);
  console.log('Codigo: ' + codigo);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<table class="table table-responsive table-hover">
  <tr>
    <td>1</td>
    <td>Carlos</td>
    <td class="excluir">Ativo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Charles</td>
    <td class="excluir">Inativo</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Ozeias</td>
    <td class="excluir">Ativo</td>
  </tr>
</table>

  • made an edit there. I added a thead> th. Remains the same concept?

  • @adventist is equal, th in this case changes nothing in the answer.

0

You can add a class on that specific line. For example let’s put a class C1.

The code would look like this.

HTML : 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<table class="table table-responsive table-hover">
  <tr>
    <td>1</td>
    <td>Carlos</td>
    <td>Ativo</td>
  </tr> 
  <tr>
    <td>2</td>
    <td>Charles</td>
    <td>Inativo</td>
  </tr> 
  <tr class="c1">
    <td>3</td>
    <td>Ozeias</td>
    <td>Ativo</td>
  </tr> 
</table>

Javascript:

 $("tr").on('click',function() {
   var className = $(this).attr('class');
   
   if(className == "c1"){
      alert("Ação diferenciada para esta linha");
      return;
   }

   var tableData = $(this).children("td").map(function(){
                    return $(this).text();
                }).get(); 
                var codigo =  $.trim(tableData[0]) ;
                alert('Codigo: '+codigo);
                
 })

So when clicking on a row of the table will be checked if it has the class C1, if yes will perform that differentiated action. I put only one Alert because I do not know what you intend to do.

Browser other questions tagged jquery html table

You are not signed in. Login or sign up in order to post.