I have a td with client code and in another td I have a list of client names with the client code
Example:
codigo | nomes
0001 | Anderson Silva(0002)
| Minotauro (0001)
| Lioto Machida(0003)
I would like to know how to highlight the name Minotauro because that is what the code 0001 contains in the code column.
I need to do this via JQuery that my table has n records.
$(function(){
$(".input-search").keyup(function(){
//pega o css da tabela
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();
}
});
});
$.extend($.expr[":"], {
"contains-ci": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="cont">
<input type="text" class="input-search" alt="lista-clientes" placeholder="Buscar nesta lista" />
<br style="clear:both">
<table class="lista-clientes" width="100%">
<thead>
<tr>
<th align="center" width="5%">#</th>
<th>Cliente</th>
<th>Carro</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td>José Ribeiro</td>
<td>VW Gol 1.0</td>
</tr>
<tr>
<td align="center">2</td>
<td>Maria Conceição</td>
<td>Fiat Palio 1.0</td>
</tr>
<tr>
<td align="center">3</td>
<td>Lourdes Silva</td>
<td>Chevrolet Cosa 1.0</td>
</tr>
<tr>
<td align="center">4</td>
<td>Marcos Henrique</td>
<td>VW Jetta 2.0</td>
</tr>
</tbody>
</table>
</div>This is enough to insert a jquery js
You can do this using :contains .
$(".search").keyup(function () {
var data = this.value.split(" ");
var table = $("#table").find("tr");
if (this.value == "") {
table.show();
return;
}
table.hide();
table.filter(function (i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
return true;
}
}
return false;
})
.show();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" class="search" />
<table id="table">
<tr>
<td>Diego</td>
</tr>
<tr>
<td>Teco</td>
</tr>
<tr>
<td>Louie</td>
</tr>
<tr>
<td>Cleyton</td>
</tr>
<tr>
<td>Nunces</td>
</tr>
</table>You can use the: contains option in Jquery: it is possible to search the contents of your td tags:
$(function(){
$("td:contains('(001)')").css("color","red");
});
Link fiddle: link