How to focus on a row by the contents of a td column?

Question

How to focus on a row by the contents of a td column?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

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. She wished that when she found the line she was looking for, she would just evidence it on the table.

Does anyone know how to do it?

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>

javascript jquery html5

asked by anonymous 27.03.2017 / 15:49

3 answers

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

27.03.2017 / 16:10

1

I understand that you want to select the line by a value that is in <td> . By the tests I did with focus did not work as expected (I did several tests without success). 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>

27.03.2017 / 18:00

Can Linden Scripting Language be considered a robust programming language? Adding cases to a query

score 1 · Accepted Answer

After a lot of fighting, you can do what you wanted. Follow the code below. Hope it helps someone.

Basically I scroll the table I want to compare the data. If he found I color the line and give 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;
        }
    });