1

Olá!

Eu gostaria de uma ajuda referente ao clique em uma tabela.

Quando eu clicasse na linha viesse os dados desta linha, exceto quando clicado em uma coluna específica (coluna 3 por exemplo), porque eu quero fazer outra ação na coluna em questão.

Trazer os dados da tabela eu já consigo, falta somente pôr em exceção a coluna que eu gostaria.

Agradeço...

$("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>

2
  • Essa coluna de excepção tem alguma classe em particular?
    – Sergio
    Commented 13/07/2017 às 21:01
  • tem não. Pelo menos ainda Commented 13/07/2017 às 21:20

2 Respostas 2

1

Podes dar uma classe a essa coluna e excluí-la com

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

Exemplo:

$("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>

2
  • fiz uma edição lá. Adicionei um thead> th. Continua o mesmo conceito? Commented 13/07/2017 às 21:40
  • @adventistaam é igual, th neste caso não muda nada na resposta.
    – Sergio
    Commented 13/07/2017 às 21:42
0

Você pode adicionar uma classe nessa linha específica. Por exemplo vamos colocar uma class c1.

O código ficaria assim.

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);
                
 })

Assim quando se clicar em uma linha da tabela será verificado se esta possui a class c1, caso sim executará aquela ação diferenciada. Coloquei apenas um alert pois não sei o que você pretende fazer.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .