Upgradeable zebra table

Asked

Viewed 39 times

-1

I made a table in html with 5 columns and more than 300 lines. In this table I put a <th> with two lines, where in the first I have the titles of each column and in the second a field for searches in the table. As the person is typing the table is being updated with the results obtained. the code I used was this:

$(function(){
    $("#tabela input").keyup(function(){        
        var index = $(this).parent().index();
        var nth = "#tabela td:nth-child("+(index+1).toString()+")";
        var valor = $(this).val().toUpperCase();
        $("#tabela tbody tr").show();
        $(nth).each(function(){
            if($(this).text().toUpperCase().indexOf(valor) < 0){
                $(this).parent().hide();
            }
        });
    });
 
    $("#tabela input").blur(function(){
        $(this).val("");
    }); 
});

This table I left without edges and not to be too simple I decided to leave it zebrada, but when performing the consultations this zebrado disappears. For example, if my search returns 20 results, instead of 10 columns with color and 10 without color intercalated, several rows with color together will appear leaving a gray block in the middle of the table.

I was using CSS to make the zebra and I couldn’t get it to update with the query or using prayer. In my internet searches I found some things and tried to implement but nothing worked, now I’m using the own javascript to make zebra using this code:

$(function(){

  $("tr:nth-child(odd)").css("background-color", "#DCDCDC");
  $("tr:nth-child(odd)").css("color", "black");
  $("tr:nth-child(odd)").css("font-weight", "bold");

});

In short I just want that when performing the search the table remains zebrad. It is possible to do this?

javascript html jquery css

2 answers

0

According to what I understood, the solution is to encapsulate in a function that part that makes the "zebra".

function zebrar(){ 
   $("tr:nth-child(odd)").css("background-color", "#DCDCDC");
   $("tr:nth-child(odd)").css("color", "black");
   $("tr:nth-child(odd)").css("font-weight", "bold");
}

And call the function zebrar() after your table update event. And also call this function in the first table load.

I hope I’ve helped, in case that’s not your problem better detail please.

  • I tried to do it that way and it didn’t work out. The problem keeps appearing I will post as it was the code changed because I may be making some error in the function call. I don’t know very well js, I looked at the documentation on the web but I still can’t identify what I might be doing wrong.

0

That’s the code already changed:

/* Função para pesquisa na tabela de pool*/
$(function(){
    $("#tabela input").keyup(function(){        
        var index = $(this).parent().index();
        var nth = "#tabela td:nth-child("+(index+1).toString()+")";
        var valor = $(this).val().toUpperCase();
        zebrar();
        $("#tabela tbody tr").show();
        $(nth).each(function(){
            if($(this).text().toUpperCase().indexOf(valor) < 0){
                $(this).parent().hide();
            }
        });
    });
    $("#tabela input").blur(function(){
        $(this).val("");
    }); 
});


/*cria a tabela zebrada e aplica os estilos*/
function zebrar(){ 
   $("tr:nth-child(odd)").css("background-color", "#DCDCDC");
   $("tr:nth-child(odd)").css("color", "black");
   $("tr:nth-child(odd)").css("font-weight", "bold");
}

In html I just include in tag <body> the attribute onload="zebrar()"

  • My dear, as far as testing here CSS does it perfectly tr:nth-child(even) {background: #CCC}&#xA;tr:nth-child(odd) {background: #f5f5f5} makes one more tentative. No need to my view to use JS.

  • I’ve run other tests here and it still doesn’t work. I was using css already, but it didn’t work as expected, so searching the internet I saw that it was possible to land the style using javascript, so I changed it for him in an attempt to make the two scripts talk, but no success yet.

  • @fweydson performed some more tests and found that both css and javascript were working normally, however I believe there is something "wrong" in the search. As far as I could see when the excerpt of the code that hides the lines without matching is executed, the hidden lines are still computed by css as being part of the table and so the zebra is disfigured. Maybe if I can change the way the filter occurs or if I can make js disregard these lines the table will continue with the zebra aspect.

  • I even tried to change the parent().hide() for parent().remove() but it did not have the expected effect and I also do not think it is feasible, because if the user needs to perform another search will need to refresh the page to reload the entire table.

Browser other questions tagged javascript html jquery css

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