alexan0308,
Вариант с использованием плагина
jQuery highlight plugin — подсветка слов в тексте
|
Сообщение от alexan0308
|
|
кликнув на ячейку с Ивановым, выделились все Ивановы. При клике на ячейке с Петровым выделились все Петровы
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$.fn.highlight = function (b, k) {
function l() {
$("." + c.className).each(function (c, e) {
var a = e.previousSibling,
d = e.nextSibling,
b = $(e),
f = "";
a && 3 == a.nodeType && (f += a.data, a.parentNode.removeChild(a));
e.firstChild && (f += e.firstChild.data);
d && 3 == d.nodeType && (f += d.data, d.parentNode.removeChild(d));
b.replaceWith(f)
})
}
function h(b) {
b = b.childNodes;
for (var e = b.length, a; a = b[--e];)
if (3 == a.nodeType) {
if (!/^\s+$/.test(a.data)) {
var d = a.data,
d = d.replace(m, '<span class="' + c.className + '">$1</span>');
$(a).replaceWith(d)
}
} else 1 == a.nodeType && a.childNodes && (!/(script|style)/i.test(a.tagName) && a.className != c.className) && h(a)
}
var c = {
split: "\\s+",
className: "highlight",
caseSensitive: !1,
strictly: !1,
remove: !0
}, c = $.extend(c, k);
c.remove && l();
b = $.trim(b);
var g = c.strictly ? "" : "\\S*",
m = RegExp("(" + g + b.replace(RegExp(c.split, "g"), g + "|" + g) + g + ")", (c.caseSensitive ? "" : "i") + "g");
return this.each(function () {
b && h(this)
})
};
$(function () {
$('td').click(function () {
var pattern = $(this).text();
pattern && $("td").highlight(pattern)
})
})
</script>
<style>
span.highlight{color:#FFFFFF;background:SlateBlue}
table,.noselected{background:#EE82EE}
td{border:1px solid black;text-align:center;padding:10px;width:80px;border:1;font-size:14px;color:#000}
</style>
</head>
<body>
<table id="mytable">
<tbody><tr>
<td></td> <td>102</td> <td>103</td> <td>104</td> <td>105</td></tr>
<tr>
<td>Январь</td><td>Иванов</td><td>Петров</td><td>Петров</td><td>Дятлов</td></tr>
<tr>
<td>Февраль</td><td>Чернов</td><td>Серов</td><td>Попов</td><td>Попов</td></tr>
<tr>
<td>Март</td><td>Сидоров</td><td>Громов</td><td>Серов</td><td>Степанов</td></tr>
<tr>
<td>Апрель</td><td>Сидоров</td><td>Чернов</td><td>Чернов</td><td>Белов</td></tr>
<tr>
<td>Май</td><td>Сидоров</td><td>Серов</td><td>Громов</td><td>Степанов</td></tr>
<tr>
<td>Июнь</td><td>Иванов</td><td>Петров</td><td>Чернов</td><td>Дятлов</td></tr>
<tr>
<td>Июль</td><td>Белов</td><td>Белов</td><td>Дятлов</td><td>Сидоров</td></tr>
<tr>
<td>Август</td><td>Попов</td><td>Белов</td><td>Дятлов</td><td>Иванов</td></tr>
<tr>
<td>Сентябрь</td><td>Громов</td><td>Попов</td><td>Попов</td><td>Иванов</td></tr>
<tr>
<td>Октябрь</td><td>Дятлов</td><td>Громов</td><td>Серов</td><td>Чернов</td></tr>
<tr>
<td>Ноябрь</td><td>Сидоров</td><td>Петров</td><td>Сидоров</td><td>Иванов</td></tr>
<tr>
<td>Декабрь</td><td>Громов</td><td>Петров</td><td>Сидоров</td><td>Громов</td></tr>
</tbody></table>
</body>
</html>