Форум PHP программистов > Оформление таблицы!

[ Поиск ] - [ Пользователи ] - [ Календарь ]

new01

24.06.2010 - 13:56

Всем привет !

Вот у меня такая задача не могу сделать , снизу рисунок , это таблица состоящаяч из 4 ячеек, и надо сделатть так , чтобы при наведении на ячейку курсора мыши появлялся номер ячейки !
Т.е. чтоб программа сама распределила номера от 1 до 4 , просто сли много ячеек например 300 ! Вот код Html !


<html>
<head>
</head>
<body>
<table width="40" height="40"border="1">
<tr height="20" border="1">
<td width="20" border="1">
</td>
<td width="20" border="1">
</td>
</tr>
<tr height="20" border="1">
<td width="20" border="1">
</td>
<td width="20" border="1">
</td>
</tr>
</body>
</html>

Не могу сообразить как сделать пожалуйста помогите !!!

user posted image

Спустя 10 минут, 48 секунд (24.06.2010 - 13:07) inpost написал(а):

JavaScript поможет! Делаете событие при наведении. Событие: "написать цифру". В цикле проставляешь нумерацию ячеек, событие передает номер.

Спустя 33 минуты, 38 секунд (24.06.2010 - 13:40) new01 написал(а):

Цитата (inpost @ 24.06.2010 - 10:07)

Спасибо за ответ,но если у меня много ячеек у меня их 980 не буду же я каждую прописывать !

Спустя 43 минуты, 46 секунд (24.06.2010 - 14:24) SlavaFr написал(а):

нет не будеш. просто посредством яваскрипта в цикле пройдеш все td и посадиш евент onmouseover

Спустя 1 час, 8 минут, 45 секунд (24.06.2010 - 15:33) Ice написал(а):

Идея такая:


    var x = document.getElementsByTagName('TD');
    for(var i=0; i<=x.length; i++) {
        x[i].onclick = function() {
            x[i].innerText = 1+i;
        }
     }

Но тут где-то ошибка вкралась.

Спустя 50 секунд (24.06.2010 - 15:34) Basili4 написал(а):

вот сдесь i<=x.length надо i<x.length

Спустя 3 минуты, 40 секунд (24.06.2010 - 15:37) Ice написал(а):

еще где-то есть. Функция чего-то не вызывается. Давно уже так делал, просто помню, что так можно, чтобы везде не писать обработчики в ХТМЛе.
~~Вобщем, если отшлифовать, мне кажется это - оптимальный вариант~~. Я б сам отшлифовал, но чего-то из памяти вышибло как.

Спустя 5 минут, 17 секунд (24.06.2010 - 15:42) Basili4 написал(а):

вот это x[i].innerText = 1+i; попробоывть заменить на this.innerText = 1+i;

Спустя 41 минута, 30 секунд (24.06.2010 - 16:24) new01 написал(а):

Цитата (Basili4 @ 24.06.2010 - 12:42)

вот это x[i].innerText = 1+i; попробоывть заменить на this.innerText = 1+i;

всем конечно спасибо огромное ,а теперь могли бы вы помочь вставить вот этот скрипт со всеми исправленными ошибками в html !Просто куда имеено его вставлять и какие где значения писать подскажите!!!

var x = document.getElementsByTagName('TD');
for(var i=0; i<x.length; i++) {
x[i].onclick = function() {
this.innerText = 1+i;
}
}

Спустя 3 минуты, 43 секунды (24.06.2010 - 16:28) Ice написал(а):

к сожалению данный скрипт не будет выполнять своего прямого предназначения, он будет писать во все ячейки номер последней итерации цикла, поскольку на момент вызова функции цикл уже отработан. Этот момент я упустил.

Спустя 6 минут, 7 секунд (24.06.2010 - 16:34) Basili4 написал(а):

Ice
с чего ты взял мне щас лень проверять конец рабочего дня но он вешает обработчик а не изменяет содержимое. ячейки.

Спустя 3 минуты, 57 секунд (24.06.2010 - 16:38) Ice написал(а):

Basili4
Кто он? скрипт? Изменяет, но только не так как надо

this.innerText = 1+i;

Вот тот скрипт, который мы с тобой намудрили, писал во все ячейки 4 при наведении.

Спустя 19 минут, 52 секунды (24.06.2010 - 16:58) Basili4 написал(а):

ну дома буду подумаю помоему ничего там сложного нет. может стоп эвент замутить или как его там.

Спустя 23 минуты, 35 секунд (24.06.2010 - 17:21) tomash написал(а):

var x = document.getElementsByTagName('TD');
for(var i=0; i<x.length; i++) {
x[i].onclick = function(j) {
return function (){this.innerText = 1+j};
}(i)
}

Может я чегой-то напутал, очень мало работаю с js. Используйте замыкания вобщем.
function(j) будет заканчивать свою работу в каждой итерации и отдавать текущее значение i

Спустя 2 часа, 3 минуты, 25 секунд (24.06.2010 - 19:25) new01 написал(а):

Цитата (tomash @ 24.06.2010 - 14:21)

var x = document.getElementsByTagName('TD');
for(var i=0; i<x.length; i++) {
x[i].onclick = function(j) {
return function (){this.innerText = 1+j};
}(i)
}

Да спасибо! Ну вот он скрипт , а теперь куда его сувать в html ? если да , то подскажите куда именно и какие значения где написать !!! зранаее всем огромное спасибо!

Спустя 21 минута, 29 секунд (24.06.2010 - 19:46) Ice написал(а):

перед закрывающим тегом </body> написать:


<script type="text/javascript">
var x = document.getElementsByTagName('TD');
for(var i=0; i<x.length; i++) {
    x[i].onclick = function(j) {
        return function (){
            this.innerText = 1+j
        };
    }(i)
} 
</script>

Спустя 14 часов, 22 минуты, 9 секунд (25.06.2010 - 10:08) SlavaFr написал(а):


<table id="tab1">
<tr><td>xxx</td><td>xx</td></tr>
<tr><td>x</td><td>xx</td></tr>
<tr><td>zx</td><td>yx</td></tr>
</table>
<script type="text/javascript">
var tds=document.getElementById('tab1').getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
  tds[i].info=i+1;
  tds[i].onmouseover=function(e){
    var t=this.innerHTML;
    this.innerHTML=this.info;
	this.info=t;
  }
  tds[i].onmousout=tds[i].onmouseover;
}
</script>

Спустя 9 минут, 24 секунды (25.06.2010 - 10:18) SlavaFr написал(а):

ошибся


<table id="tab1">
<tr><td>xxx</td><td>xx</td></tr>
<tr><td>x</td><td>xx</td></tr>
<tr><td>zx</td><td>yx</td></tr>
</table>
<script type="text/javascript">
var shwap=function(e){
    var t=this.innerHTML;
    this.innerHTML=this.info;
	this.info=t;
  };
var tds=document.getElementById('tab1').getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
  tds[i].info=i+1;
  tds[i].onmouseover=shwap;
  tds[i].onmouseout=shwap;
}

Спустя 3 дня, 2 часа, 16 минут, 35 секунд (28.06.2010 - 12:34) linker написал(а):


<html>
 <body onload="fillCellNumbers()">
  <script>
  function fillCellNumbers()
  {
  	var Table = document.getElementById('Contents');
  	var TDs = Table.getElementsByTagName('TD');
  	var Temp = '';
  	for(var Index in TDs)
  	{
            var TD = TDs[Index];
            TD.id = parseInt(Index) + 1;
            TD.onmouseover = function()
                                        {
                                            Temp = this.innerHTML;
                                            this.innerHTML = this.id;
                                        }
            TD.onmouseout = function() { this.innerHTML = Temp; }
        }
  }
  </script>
  <table id="Contents" border="1">
   <tr height="20">
    <td width="20">a</td>
    <td width="20">b</td>
   </tr>
  </table> 
 </body>
</html></table>

Что-то, где-то так. Использование Temp предпочтительней, нежели наставлять элементам td нестандартные атрибуты, ибо onmouseout для одной ячейки сработает всегда первее onmouseover для другой.

Быстрый ответ:

Здесь расположена полная версия этой страницы.