Search between Jquery columns

Asked

Viewed 458 times

5

I own a td with client code and in another td I have a customer name relationship 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 Minotaur because that is what the code says 0001 in the code column.

I need to do this via JQuery this my table have n records.

  • How do you want to do this ? How will you search ?

3 answers

4

You can do it using the :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>
<input type="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>

  • 1

    perfect :3 very good same guy

  • If it helped you mark the answer as right =D

  • 1

    the question is not mine :/ haeuahe :3

  • Your daughter of a mother

  • 1

    heuheuehu for sure the comments are not for this but does not resist!

0

You can use in Jquery the option :contains, which is possible to search the contents of your tags td:

$(function(){
 $("td:contains('(001)')").css("color","red");

});

Link fiddle : https://jsfiddle.net/y1d8he21/

0


$(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>
<div class="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>

just insert a js from jquery

Browser other questions tagged

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