Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.09.2013, 21:14
Профессор
Отправить личное сообщение для alexan0308 Посмотреть профиль Найти все сообщения от alexan0308
 
Регистрация: 11.04.2011
Сообщений: 207

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

Последний раз редактировалось alexan0308, 23.09.2013 в 21:32. Причина: Добавил ссылку
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2013, 21:25
Профессор
Отправить личное сообщение для alexan0308 Посмотреть профиль Найти все сообщения от alexan0308
 
Регистрация: 11.04.2011
Сообщений: 207

Вот ссылка на пример:
http://neftek.legko.ufanet.ru/select/
Ответить с цитированием
  #3 (permalink)  
Старый 23.09.2013, 22:21
Профессор
Отправить личное сообщение для alexan0308 Посмотреть профиль Найти все сообщения от alexan0308
 
Регистрация: 11.04.2011
Сообщений: 207

Всем спасибо за проявленный интерес. Решил проблему, используя обертку
if (text.indexOf(chel)  > -1) { 
            td.onclick = (function(value){
    			return function() {fioselect(value);}
			})(chel); 
            }


Теперь все ок
Ответить с цитированием
  #4 (permalink)  
Старый 24.09.2013, 00:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,409

Выделение ячеек с одинаковым содержанием
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>

Последний раз редактировалось рони, 24.09.2013 в 00:36.
Ответить с цитированием
  #5 (permalink)  
Старый 25.09.2013, 20:17
Профессор
Отправить личное сообщение для alexan0308 Посмотреть профиль Найти все сообщения от alexan0308
 
Регистрация: 11.04.2011
Сообщений: 207

По-мому, мой код лутше и понятнее ))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибка в коде Js, Неправильно работает скрипт. Julia Panatova Общие вопросы Javascript 1 19.01.2011 13:12
Ошибка в коде Js, Неправильно работает скрипт. Julia Panatova Общие вопросы Javascript 7 07.01.2011 12:41
Скрипт неправильно работает в FF InviS Общие вопросы Javascript 6 11.04.2010 15:56
AJAX - заполнение select - неправильно работает в Mozilla 5.0 С.Тарасов AJAX и COMET 0 16.06.2009 23:58
java-script фотогалерея, неправильно работает в ИЕ6 Scroll Internet Explorer 1 03.12.2008 13:16