1

Criei uma função para dá focus em linha de uma table, nessa função tenho que encontrar a célula com os mesmo valores que vou passar por parâmetro. Gostaria que quando achasse a linha buscada ele apenas evidenciasse ela na tabela.

Alguém sabe como fazer?

JS

var tabela = $(this).attr('alt');
if ($(this).val() != "") {
    $("." + tabela + " tbody>tr").hide();
    $("." + tabela + " td:contains-ci('" + $(this).val() + "')").parent("tr").show();
} else {
    $("." + tabela + " tbody>tr").show();
}
});

HTML

      <table  name='table_geral' id="#table_geral" class="table table_geral table-striped table-bordered table-hover table-condensed  table-ordered" >
   <thead>
      <tr style="background: #63B8FF;color: #fff; height: 5px" >
         <th  style="width: 50px">Acoes</th>
         <th >Nota</th>
         <th align="center" >Cnpj</th>
         <th >Serie</th>
         <th>Protocolo</th>
         <th>Origem</th>
         <th>Status</th>
      </tr>
   </thead>
   <tbody style=''>
      <tr>
         <td align=center>
            <a href='javascript:void(0)' name='botao_acharNota' id='botao_acharNota' class='btn btn-success btn-xs' style='width:22px;'   data-toggle='tooltip' data-container='body' data-placement='top' title='Clique para ir ate essa nota!'><i class='glyphicon glyphicon-copy'></i></a>
         </td>
         <td align=center >NOTA</td>
         <td align=center>CNPJ</td>
         <td align=center >SERIE</td>
         <td align=center>PROTOCOLO</td>
         <td align=center>file</td>
         <td align=center>status</td>
      </tr>
   </tbody>
</table>
3
  • Tem como adicionar a estrutura da sua tabela?
    – Marconi
    Commented 27/03/2017 às 13:52
  • Sim. Já está la Commented 27/03/2017 às 13:56
  • Postei uma resposta @MarlonCastro.
    – Marconi
    Commented 27/03/2017 às 16:00

3 Respostas 3

1

Acredito que o script abaixo seja o que você esta procurando:

function Procura() {
  var textProcurado = document.getElementById('valorProcurado').value;
  var tabelaAlvo = document.getElementById('tabelaGeral');
  var tabelaAlvoColCnt;
  for (var numLinha = 0; numLinha < tabelaAlvo.rows.length; numLinha++) {
    var dadosLinha = '';
    if (numLinha == 0) {
    tabelaAlvoColCnt = tabelaAlvo.rows.item(numLinha).cells.length;
    continue;
    }
    for (var numColuma = 0; numColuma < tabelaAlvoColCnt; numColuma++) {
    dadosLinha += tabelaAlvo.rows.item(numLinha).cells.item(numColuma).textContent;
    if (numLinha <= 1) {
      document.getElementById('semResultados').style.display = "block";
    }
    }
  }
}
1

Depois de muita luta conseguir fazer o que queria. Segue o codigo abaixo. Espero que ajude alguém.

Basicamente eu percorro a tabela que quero comparar os dados. Se ele achou eu coloro a linha e dou o foco na linha que ele achou.

    var table = $('#PrimeiraTabela'); 

    $table.each(function () {
        var idLinha = ($(this).closest("tr").attr("data-id"));
        if (idGeral == idLinha) {
            $(this).css("background", "#FFD700");
            $(this).get(0).scrollIntoView();
            return true;
        }
    });
1

Entendi que você deseja selecionar a linha por um valor que esteja em uma <td>. Pelos testes que fiz com focusnão funcionou como esperado(fiz vários testes sem sucesso). Uma alternativa é destacar a linha com um background.

$('button').on('click', function() {
    var input = document.getElementById('inputValor');
    $("table tr td").filter(function() {
        return $(this).text() == input.value;

    }).closest('tr').css("background", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <tr>
      <td>Linha 1</td>
      <td>Valor 1</td>
   </tr>
   <tr>
      <td>Linha 2</td>
      <td>Valor 2</td>
   </tr>
   <tr>
      <td>Linha 3</td>
      <td>Valor 3</td>
   </tr>
   <tr>
      <td>Linha 4</td>
      <td>Valor 4</td>
   </tr>
   <tr>
      <td>Linha 5</td>
      <td>Valor 5</td>
   </tr>
   <tr>
      <td>Linha 6</td>
      <td>Valor 6</td>
   </tr>
   <tr>
      <td>Linha 7</td>
      <td>Valor 7</td>
   </tr>
   <tr>
      <td>Linha 8</td>
      <td>Valor 8</td>
   </tr>
   <tr>
      <td>Linha 9</td>
      <td>Valor 9</td>
   </tr>
   <tr>
      <td>Linha 10</td>
      <td>Valor 10</td>
   </tr>
   <tr>
      <td>Linha 11</td>
      <td>Valor 11</td>
   </tr>
   <tr>
      <td>Linha 12</td>
      <td>Valor 12</td>
   </tr>
   <tr>
      <td>Linha 13</td>
      <td>Valor 13</td>
   </tr>
   <tr>
      <td>Linha 14</td>
      <td>Valor 14</td>
   </tr>
   <tr>
      <td>Linha 15</td>
      <td>Valor 15</td>
   </tr>
   <tr>
      <td>Linha 16</td>
      <td>Valor 16</td>
   </tr>
   <tr>
      <td>Linha 17</td>
      <td>Valor 17</td>
   </tr>
   <tr>
      <td>Linha 18</td>
      <td>Valor 18</td>
   </tr>
   <tr>
      <td>Linha 19</td>
      <td>Valor 19</td>
   </tr>
   <tr>
      <td>Linha 20</td>
      <td>Valor 20</td>
   </tr>
   <tr>
      <td>Linha 21</td>
      <td>Valor 21</td>
   </tr>
</table>
<input type='text' id='inputValor'/>
<button>Colorir</button>

0

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 .