Поиск по таблице организовал, воспользовавшись данной
темой, сам я новичок в JS, только начинаю постигать азы.
Вопрос следующий, как подсветить только символ введенный в строку поиска, а не всю строку целиком?
<!DOCTYPE html>
<HTML>
<title>
Table Sort!
</title>
<link rel="stylesheet" type="text/css" href="style/my.css">
<header>
<meta charset="utf-8">
<a href="index.html" class="ghost-button">Resume</a>
<a href="tsort.html" class="ghost-button">Table sort</a>
<a class="resume">Table Sort!</a>
<hr>
</header>
<body>
<br><main>
<form action=""><center>
<p><input required id="search_id" class="search_id; input-string" type="text" size="50" maxlength=50 value="" placeholder="String to sort..." onfocus="this.value=''">
<input id="btn_id" type="button" class="button; ghost-button" value="Sort"> <a href="tsort.html" class="ghost-button">Clean</a></p></center>
</form>
<br>
<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>
</main>
<footer>
<hr>
<center>
<table>
<tr>
<td>
<hr width="50" align="center"/>
</td><td>
Copyright developer 2016
</td>
<td>
<hr width="50" align="center"/>
</td></tr>
</table></center>
</footer>
<script>
btn_id.onclick = function () { //присваиваем кнопке функцию
search(search_id.value)
}
function search(searchWord) { //создание функции
var idx = 0; //индекс (указывает место куда вставлять очередное совпадение)
for (var i = 1, l = table_tag.rows.length; i < l; i++) { //перебор столбцов по длине
// table_tag.rows[i].style.backgroundColor = 'white'; //изменяем цвет второй ячейки
for (var j = 0, l1 = table_tag.rows[i].cells.length; j < l1; j++) { //перебор ячеек
if (table_tag.rows[i].cells[j].innerHTML.indexOf(searchWord) + 1) { //если длина и ячейки совпадают, то перемещаем строку после idx
idx++;
var clone = table_tag.rows[i].cloneNode(true);
table_tag.rows[i].parentNode.removeChild(table_tag.rows[i]);
clone.style.backgroundColor = '#1abc9c'; //найденной строке цвет #1abc9c
table_tag.rows[1].parentNode.insertBefore(clone, table_tag.rows[idx]);//чтобы найденные строки шли в той же последовательности, что и в изначальной таблице
}
}
}
}
</script>
</body>
</HTML>