Help on code

Hi everyone,

New here I'm trying to make searchable tables for my work place to filter out shoe information. I was lucky to find a tutorial on how to make my HTML tables searchable. But my colleagues are asking if there could be a way to freeze top row (I left out the data because it's compagny sensitive info)

Thank you,



Code here:

<script type="text/javascript">
(function(document) {
'use strict';

var LightTableFilter = (function(Arr) {

var _input;

function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}

function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}

return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);

document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});

})(document);
</script>

// In the HTML//

p style="text-align:center"><b>SEARCH: </b><input
class="light-table-filter" data-table="tableuneek"
placeholder="Type name/Gender" type="search"><br>
</p>
<table class="table1" width="1660" height="50 "
cellspacing="2" cellpadding="2" align="center" border="1">
<tbody>
<tr>
<td valign="top"><b>Name</b><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<br>
</b></td>
<td valign="top"><b>Gender </b><b><br>
</b></td>
<td valign="top"><b>Last</b><b><br>
</b></td>
<td valign="top"><b>Fit tip</b><b><br>
</b></td>
<td valign="top"><b>Waterproof</b><b><br>
</b></td>
<td valign="top"><b>Insulated</b><b><br>
</b></td>
<td valign="top"><b>CNX</b><b><br>
</b></td>
<td valign="top"><b>Rem Insole</b><b><br>
</b></td>
<td valign="top"><b>Laces&nbsp; </b><b><br>
</b></td>
<td valign="top"><b>Heel to toe</b><b><br>
</b></td>
<td valign="top"><b>Activity&nbsp;&nbsp; <br>
</b></td>
<td valign="top"><b>Extra
info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; <br>
</b></td>
<td valign="top"><b>wgt&nbsp; </b><b><br>
</b></td>
<td valign="top"><b>Car FW18</b><br>
</td>
</tr>
</tbody>
</table>

Attached Thumbnails