<script>
var tbl = document.getElementById('myTable');
var norows = document.getElementById('no-rows-alert');
document.getElementById('myInput').addEventListener('keyup', function() {
var matchedRow = 0;
for(var r = 0; r < tbl.rows.length; r++) {
var row = tbl.rows[r];
var matchedCell = 0;
for (var c=0; c < row.cells.length; c++) {
var cell = row.cells[c];
var srch = this.value.toUpperCase();
var cellVal = cell.textContent.substr(0, this.value.length).toUpperCase();
if (srch == cellVal) {
matchedCell++;
break;
}
}
matchedRow += matchedCell;
row.style.display = matchedCell ? 'inherit' : 'none'
}
norows.style.display = matchedRow ? 'none' : 'inherit';
});
</script>
Working sample here
if (cell.textContent.substr(0,filter.length).toUpperCase() == filter) {
tr.style.display = 'table-row';
}
else {
}
<script>
var tbl = document.getElementById('myTable');
var norows = document.getElementById('no-rows-alert');
document.getElementById('myButton').addEventListener('click', function() {
var matchedRow = false;
var srch = $('#myInput').val().toUpperCase();
for(var r = 0; r < tbl.rows.length; r++) {
var row = tbl.rows[r];
var cell = row.cells[0];
var cellVal = cell.textContent.substr(0, srch.length).toUpperCase();
if (srch == cellVal) {
matchedRow = true;
row.style.display = 'table-row';
}
else {
row.style.display = 'none';
}
}
norows.style.display = matchedRow ? 'none' : 'inherit';
if (!matchedRow) {
setTimeout(function() {
norows.style.display = 'none'
}, 1500)
}
});
</script>
Personally I would have the message after the table
Open in new window
JavaScriptOpen in new window