zav,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<style type='text/css'>
body {
font-family: Arial, Helvetica;
font-size: 12px;
}
table {
width: 500px;
}
tr {
height: 20px;
}
.guide {
text-decoration: underline;
text-align: center;
}
.odd {
color: #fff;
background: #666;
}
.even {
color: #666;
}
.hot {
border: 1px solid #f00;
background-color: rgb(220, 220, 220);
color: rgb(0, 0, 255);
padding: 2px;
margin: 2px 1px;
border-radius: 2px;
}
{
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var input = document.querySelector('#search_id'),
tbody = document.querySelector('tbody'),
td = [].slice.call(tbody.querySelectorAll('td')),
tr = [].slice.call(tbody.querySelectorAll('tr'));
input.addEventListener('input', function() {
var val = this.value,
reg = new RegExp("("+val+")", "gi");
[].forEach.call( document.querySelectorAll('span.hot'), function(el) {
el.parentNode.replaceChild(document.createTextNode(el.textContent),el)
});
val && td.forEach(function(td) {
td.innerHTML = td.textContent.replace(reg, "<span class='hot'>$1</span>")
});
tr.sort(function(a,b) {
var aL = +!!a.querySelectorAll('span.hot').length,
bL = +!!b.querySelectorAll('span.hot').length,
aN = +a.querySelector('td').textContent,
bN = +b.querySelector('td').textContent;
return bL - aL || aN - bN
}).forEach(function(tr) {
tbody.appendChild(tr)
});
});
});
</script>
</head>
<body>
<input id="search_id" type="text"></input>
<table style="border-collapse: collapse" border="1" bordercolor="white" width="1000" cellpadding="0" cellspacing="0" align="center" id="table_tag">
<thead style="background: #ffcece">
<th>Number</th><th>Name</th><th>Description</th><th>Date</th><th>Amount</th><th>Status</th>
</thead>
<tbody>
<tr align="center">
<td>1</td><td>Jo</td><td>a taxi driver</td><td value="2014-03-01">2014-03-01</td><td>1500</td><td>
married</td>
</tr>
<tr align="center">
<td>2</td><td>Den</td><td>teacher</td><td value="2013-11-01">2013-11-01</td><td>1000</td><td>
married</td>
</tr>
<tr align="center">
<td>3</td><td>Lisa</td><td>marketer</td><td value="2010-10-12">2010-10-12</td><td>899</td><td>
alone</td>
</tr>
<tr align="center">
<td>4</td><td>Pol</td><td>unemployed</td><td value="1995-01-31">1995-01-31</td><td>500</td><td>
married</td>
</tr>
<tr align="center">
<td>5</td><td>Arni</td><td>pensioner</td><td value="2356-08-06">2356-08-06</td><td>650</td><td>
married</td>
</tr>
</tbody>
</table>
</body>
</html>