When searching for a table row, it doesn't let the nested table header row stay using Javascript function

Question

i am knocking my head against the wall. I have a table with a nested table, above the table i have a search field. The User should type a number in the input field and the search should start narrow down the row with entered numbered.

So far so good, i can narrow it down within the nested table, but the target is to let the header row of the parent table stay. I assume it is just a small piece missing, but maybe a extra set of eyes could help me out here.

The desired solution is to let the "times" row from the parent table also stay.

Below is my snippet:

function reservationManagerListTableSearchFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("reservationManagerListTableNumberInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("table2");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    if (!tr[i].classList.contains('header')) {
      td = tr[i].getElementsByTagName("td"),
        match = false;
      for (j = 0; j < td.length; j++) {
        if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
          match = true;
          break;
        }
      }
      if (!match) {
        tr[i].style.display = "none";
      } else {
        tr[i].style.display = "";
      }
    }
  }
}

/* Below is the Schedule Part for the Reservation Manager */

#reservationManagerScrolltbody {
  height: 10em;
  /* Just for the demo          */
  overflow-y: auto;
  /* Trigger vertical scroll    */
  overflow-x: auto;
  /* Trigger horizontal scroll    */
  width: 100px;
}

#table2 td+td {
  border-left: 2px solid #F5F5F5;
  font-size: 1vw;
}

#table2 th+th {
  border-left: 2px solid #F5F5F5;
  font-size: 1vw;
}

#waiterStationTableinfo td+td {
  border-left: 1px solid #F5F5F5;
  font-size: 0.5vw;
}






  Search by any table
  
  
    
      
        
        
          
          

        
        11:00
        11:30
        12:00
        12:30
        13:00
        13:30
        14:00
        14:30
        17:00
        17:30
        18:00
        18:30
        19:00
        19:30
        20:00
        20:30
        21:00
        21:30
        22:00
      
    
    

      
        
          Waiterstation 1
            
            
              
                TN
                TT
                RA
                GA
              
            
            
              
                116
                2 TOP
                2
                6
              
              
                214
                2 TOP
                3
                5
              
              
                154
                2 TOP
                2
                3
              
              
                323
                2 TOP
                0
                0
              
            
          
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        4 TOP
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        6 TOP
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        8 TOP
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        10 TOP
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        12 TOP
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        14 TOP
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        16 TOP
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
      
        Dummy

Chris · Accepted Answer

Ok I am not 100% sure this is what you wanted, just let me know and we can work on it some more.

https://jsfiddle.net/g9u98Lf5/2/

So basically I added this:

$(function(){
    $.expr[':'].containsIgnoreCase = function (n, i, m) {
        return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    $('#reservationManagerListTableNumberInput').keyup(function(e) {
        clearTimeout($.data(this, 'timer'));
        if(e.keyCode == 13)
            search(true);
        else
            $(this).data('timer', setTimeout(search, 100));
    });
});

function search(force) {
    if(this.value == '') {
        $('#table2 tbody tr').show();
        return;
    }
    var word = $('#reservationManagerListTableNumberInput')[0].value;
    var word_filter = $('#table2 tbody tr');
    if($.trim(word) != '')
        word_filter = word_filter.filter(':containsIgnoreCase('+word+')');
    $('#table2 tbody tr').hide();
    word_filter.show();
}

So what does that do? Well the first little bit I added to ensure that the page finished loading before I do anything

$(function(){

Then I added a little extension to the already existing :contains filter because it doesn't work for case sensitive text

$.expr[':'].containsIgnoreCase = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

The part after that catches the keyup on the input box (you do not really want to use the onkey attribute it will get deprecated)

$('#reservationManagerListTableNumberInput').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if(e.keyCode == 13)
        search(true);
    else
        $(this).data('timer', setTimeout(search, 100));
});

The part you care about is here:

search();

The rest of the stuff is just to make sure it doesn't run on every single keyup, but instead only runs when there were 100 milliseconds of wait time. It makes your code faster and feels better.

Now for the search function... So you were already doing the right thing, the main difference is that instead of searching on the entire table I only use the tbody tag to search in:

$('#table2 tbody tr')

That will select everything inside #table2 inside the tbody tag that is a tr

I then match the result, hide everything, then show only what was matched.

EDIT:

Based on your comment it should now only match the entire string. It will still match anything containing what was searched so for example if you search for "4 TOP", then it will show both "4 TOP" and "14 TOP". If that is not what you want then let me know and we can change it.

When searching for a table row, it doesn't let the nested table header row stay using Javascript function

Answers (1)

Related Questions

When searching for a table row, it doesn&#39;t let the nested table header row stay using Javascript function

Answers (1)

Related Questions

When searching for a table row, it doesn't let the nested table header row stay using Javascript function