How to give Focus in a row by the contents of a td column?

Asked

Viewed 684 times

1

I created a function to give focus in-line of a table, in this function I have to find the cell with the same values that I will pass by parameter. I wish that when he found the line he only evidenced it in the table.

Someone knows how to do?

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>
  • You can add the structure of your table?

  • Yes. It’s already there

  • I posted a reply @Marloncastro.

3 answers

1


After a lot of struggle get to do what you wanted. Follow the code below. I hope you help someone.

Basically I go through the table I want to compare the data. If he found I color the line and give the foco on the line he found.

    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

I believe the script below is what you are looking for:

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

I understand that you want to select the line for a value that is in a <td>. For the tests I’ve run on focusdid not work as expected(I did several tests unsuccessfully). An alternative is to highlight the line with a 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>

Browser other questions tagged

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