Добрый вечер! Реализую событие, при котором все ячейки таблицы с заданной фамилией, например Петров, выделяются другим цветом, с помощью функции
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>