Неправильно работает добавления события на ячейку таблицы
Добрый вечер! Реализую событие, при котором все ячейки таблицы с заданной фамилией, например Петров, выделяются другим цветом, с помощью функции fioselect(chel). На кнопках работает прекрасно. Не получается повесить событие на ячейки таблицы.
Чтобы кликнув на ячейку с Ивановым, выделились все Ивановы. При клике на ячейке с Петровым выделились все Петровы. И так и сяк искал ошибку не нашол. Вот ссылка на пример: http://neftek.legko.ufanet.ru/select/ Вот код
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
<style>
table { background-color: violet;}
td {
border: 1px solid black;
text-align: center;
padding: 10px;
width: 80px;
border-width:1;
font-size: 14px;
color:black; }
.selected { background-color:SlateBlue; }
.noselected { background-color: violet; }
</style>
</head>
<body>
<div id="applic">
</div>
<div id="help">
</div>
</body>
</html>
<script type="text/javascript">
var fio = ['Иванов','Петров','Сидоров','Степанов','Попов','Громов','Дятлов','Серов','Чернов','Белов'];
function num2month(num) {
var month = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];
return month[num];
}
function getRandom(m,n){
return Math.floor(Math.random()*(n-m+1))+m;
}
function num2fio() {
num = getRandom(0,9);
return fio[num];
}
function fioselect(chel)
{
help = document.getElementById('help');
for(var k=1; k<colcount;k++)
{
for(var i=1; i<rowcount;i++)
{
td = document.getElementById('mytable').rows[i].cells[k];
text = td.innerHTML;
if (text.indexOf(chel) > -1) {td.className = "selected";}
else {td.className = "noselected";}
}
}
}
var sssr = '';
sssr = sssr + '<table id="mytable">\n';
sssr = sssr +'<tr>\n';
sssr = sssr + '<td></td> <td>102</td> <td>103</td> <td>104</td> <td>105</td>';
sssr = sssr +'</tr>\n';
for (i=0; i<12; ++i)
{
sssr = sssr +'<tr id="tr' + String(i) + '">\n';
for (j=0; j<5; ++j)
{
sssr = sssr + '<td>';
if (j==0) {sssr= sssr+ num2month(i);}
else
{sssr= sssr+ num2fio();}
sssr = sssr + '</td>';
}
sssr = sssr +'</tr>\n';
}
sssr = sssr + '</table> \n';
sssr = sssr + '<br><input type="button" value="Иванов" onclick=fioselect("Иванов")>';
sssr = sssr + '<br><input type="button" value="Петров" onclick=fioselect("Петров")>';
sssr = sssr + '<br><input type="button" value="Белов" onclick=fioselect("Белов")>';
document.getElementById("applic").innerHTML = sssr;
var rowcount= document.getElementById('mytable').rows.length; // кол-во строк таблицы
var colcount= document.getElementById('mytable').rows[1].cells.length; // кол-во столбцов таблицы
for(var k=1; k<colcount;k++)
{
for(var i=1; i<rowcount;i++)
{
td = document.getElementById('mytable').rows[i].cells[k];
text = td.innerHTML;
for (m=0; m<10; ++m)
{
chel = fio[m];
if (text.indexOf(chel) > -1) { chel = '"' + fio[m] + '"'; td.onclick = function() {fioselect(chel)};
}
}
}
}
</script>
|
Вот ссылка на пример:
http://neftek.legko.ufanet.ru/select/ |
Всем спасибо за проявленный интерес. Решил проблему, используя обертку
if (text.indexOf(chel) > -1) {
td.onclick = (function(value){
return function() {fioselect(value);}
})(chel);
}
Теперь все ок |
Выделение ячеек с одинаковым содержанием
alexan0308,
Вариант с использованием плагина jQuery highlight plugin — подсветка слов в тексте Цитата:
<!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>
|
По-мому, мой код лутше и понятнее ))
|
| Часовой пояс GMT +3, время: 22:01. |