Chris Chris -4 years ago 113
CSS Question

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

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- right container -->
<div id="right">
<h6 style="font-size:1vw; ">Search by any table</h6>
<input style="margin-top:0.5em margin-bottom: 0.5em;" class="form-control" type="text" id="reservationManagerListTableNumberInput" onkeyup="reservationManagerListTableSearchFunction()" placeholder="Search for any table.. ">
<table class="table table-rsponsive table-sm table-hover" id="table2">
<thead class="header">
<tr>
<!-- if checkbox is checked, clone reservation subjects to the whole table row -->
<th class="redips-mark blank">
<input id="week" type="checkbox" title="Preassign Table by drag and drop Reservation in each slot" checked/>
<input id="report" type="checkbox" title="Show Assignment report" />

</th>
<th class="redips-mark dark">11:00</th>
<th class="redips-mark dark">11:30</th>
<th class="redips-mark dark">12:00</th>
<th class="redips-mark dark">12:30</th>
<th class="redips-mark dark">13:00</th>
<th class="redips-mark dark">13:30</th>
<th class="redips-mark dark">14:00</th>
<th class="redips-mark dark">14:30</th>
<th class="redips-mark dark">17:00</th>
<th class="redips-mark dark">17:30</th>
<th class="redips-mark dark">18:00</th>
<th class="redips-mark dark">18:30</th>
<th class="redips-mark dark">19:00</th>
<th class="redips-mark dark">19:30</th>
<th class="redips-mark dark">20:00</th>
<th class="redips-mark dark">20:30</th>
<th class="redips-mark dark">21:00</th>
<th class="redips-mark dark">21:30</th>
<th class="redips-mark dark">22:00</th>
</tr>
</thead>
<tbody class="reservationManagerScrolltbody">

<tr>
<td class="reservationManagerTableType">
<table class="waiterStationTableinfo">
<label>Waiterstation 1</label>
<thead class="header">
<tr>
<th>TN</th>
<th>TT</th>
<th>RA</th>
<th>GA</th>
</tr>
</thead>
<tbody>
<tr>
<td>116</td>
<td>2 TOP</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>214</td>
<td>2 TOP</td>
<td>3</td>
<td>5</td>
</tr>
<tr>
<td>154</td>
<td>2 TOP</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>323</td>
<td>2 TOP</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="reservationManagerTableType">4 TOP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="reservationManagerTableType">6 TOP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="reservationManagerTableType">8 TOP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="reservationManagerTableType">10 TOP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="reservationManagerTableType">12 TOP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="reservationManagerTableType">14 TOP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="reservationManagerTableType">16 TOP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="reservationManagerTableType">Dummy</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!-- right container -->




Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download