CODEWITHSUNDEEP
jqueryhtmlcss
Tiago
Tiago

Reputation: 5

Keeping nth-child(odd) after filtering with jQuery

I have a table with multiple entries that I filter using a jQuery script I found on this site, which works great, but after I filter it, it doesn't keep the correct tr:nth-child(odd) color I put in my CSS. Or rather, it keeps the color of the original list and not the filtered one (Hopefully that made sense. If not, then the JSFiddle demo at the bottom should clear it up). I know nothing about JavaScript/jQuery so I need help. I need a way to keep the grey color every odd row after filtering.

HTML

<input type="text" id="search" placeholder="Search...">
<table id="table">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Chantal</td>
    <td>37</td>
    <td>Belgium</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>31</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>John</td>
    <td>51</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Vadim</td>
    <td>24</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>Aleksei</td>
    <td>25</td>
    <td>Russia</td>
  </tr>
  <tr>
    <td>Chantal</td>
    <td>37</td>
    <td>Belgium</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>31</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>John</td>
    <td>51</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Vadim</td>
    <td>24</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>Aleksei</td>
    <td>25</td>
    <td>Russia</td>
  </tr>
</table>

CSS

#search {
  height: 20px;
  margin: 4px 0;
  padding: 5px 5px;
  border: 1px solid #E5C100;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 2%;
}

th {
  background-color: #CC0000;
  color: #FFFFFF;
  text-align: left;
  padding: 10px;
}

td {
  text-align: left;
  padding: 10px;
}

tr:nth-child(odd) {
  background-color: #E5E5E5;
}

jQuery

var $rows = $('#table tr:not(:first)');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

JSFiddle Demo

https://jsfiddle.net/8m6p1k96/

Thanks!

Upvotes: 0

Views: 625

Answers (1)

Woodrow
Woodrow

Reputation: 2832

Please see the updated fiddle here JSFIDDLE or the following snippet:

I removed the CSS for the tr:nth-child(odd), as the table will become dynamic when you apply the search filter. So initialize the table with striping by adding a CSS class "zebra-stripe". Then, during your keyup function, as the visible rows change, re-stripe the table rows by looping through the visible rows and add the stripe class to every other row, and remove the stripe class for those rows that may not be tr:nth-child(odd) that may have been so in the previous dynamic row set.

var $rows = $('#table tr:not(:first)');

// Add stripes to odd # rows..
$('tr:nth-child(odd)').each(function() {
  $(this).addClass('zebra-stripe');
});

$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();

  // Re-stripe now visible row set..
  $('#table tr:visible').each(function(e, v) {
    if (e % 2 == 0) {
      $(this).addClass('zebra-stripe');
    } else {
      $(this).removeClass('zebra-stripe');
    }
  });

});
#search {
  height: 20px;
  margin: 4px 0;
  padding: 5px 5px;
  border: 1px solid #E5C100;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 2%;
}

th {
  background-color: #CC0000;
  color: #FFFFFF;
  text-align: left;
  padding: 10px;
}

td {
  text-align: left;
  padding: 10px;
}

.zebra-stripe {
  background-color: #E5E5E5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Search...">

<table id="table">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Chantal</td>
    <td>37</td>
    <td>Belgium</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>31</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>John</td>
    <td>51</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Vadim</td>
    <td>24</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>Aleksei</td>
    <td>25</td>
    <td>Russia</td>
  </tr>
  <tr>
    <td>Chantal</td>
    <td>37</td>
    <td>Belgium</td>
  </tr>
  <tr>
    <td>Pedro</td>
    <td>31</td>
    <td>Spain</td>
  </tr>
  <tr>
    <td>John</td>
    <td>51</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Vadim</td>
    <td>24</td>
    <td>Romania</td>
  </tr>
  <tr>
    <td>Aleksei</td>
    <td>25</td>
    <td>Russia</td>
  </tr>
</table>

Upvotes: 2

Related Questions