Выделение строки и столбца в таблице html

**PuPsAn** · 03.11.2013 12:17

ArhStrAngeR, Нет, хочется самому сделать, если хотел бы заказать пошел бы на фрилансер какой нить, а тут надеюсь получить какие то советы или примеры как это можно реализовать.

**Даниэль Алиевский** · 03.11.2013 17:44

PuPsAn, но это действительно JavaScript. В принципе можно и без классов, просто обработка событий onmouseover и onmouseout для каждого td - с динамическим изменением цвета .style.backgroundColor у соответствующих td в таблице.

**druzhkov** · 03.11.2013 19:59

Сообщение от PuPsAn

druzhkov, Можно поподробнее как это сделать?

Подробнее, к сожалению, уже не могу - фактически, я вам уже готовый код напишу. :) И так достаточно подробно расписал.

Начните с php-кода - найдите кусок, где генерируется таблица, добавьте классы. Потом можно в личке обсудить доработки яваскриптов.

**Даниэль Алиевский** · 03.11.2013 23:48

PuPsAn,
например:

Код:

<html>
<script>
function over(e) {
    var row = 0;
    var col = 0;
    var table = e.parentNode.parentNode;
    var trs = table.childNodes;
    for (var i = 0; i < trs.length; i++) {
        if ((trs[i].tagName+"").toLowerCase()=='tr') {
            var tds = trs[i].childNodes;
            for (var j = 0; j < tds.length; j++) {
                if ((tds[j].tagName+"").toLowerCase()=='td') {
                    if (e == tds[j]) {
                        row = i;
                        col = j;
                    }
                }
            }
        }
    }
    for (var i = 0; i < trs.length; i++) {
        if ((trs[i].tagName+"").toLowerCase()=='tr') {
            var tds = trs[i].childNodes;
            for (var j = 0; j < tds.length; j++) {
                if ((tds[j].tagName+"").toLowerCase()=='td') {
                    tds[j].style.backgroundColor =
                        i==row || j==col ? "#FFFF00" : "#FFFFFF";
                }
            }
        }
    }
}
function out(e) {
    var table = e.parentNode.parentNode;
    var trs = table.childNodes;
    for (var i = 0; i < trs.length; i++) {
        if ((trs[i].tagName+"").toLowerCase()=='tr') {
            var tds = trs[i].childNodes;
            for (var j = 0; j < tds.length; j++) {
                if ((tds[j].tagName+"").toLowerCase()=='td') {
                    tds[j].style.backgroundColor = "#FFFFFF";
                }
            }
        }
    }
}
</script>
<body>

<table border="1" cellpadding="20">
<tr>
<td onmouseover="over(this)" onmouseout="out(this)">1A</td>
<td onmouseover="over(this)" onmouseout="out(this)">1B</td>
<td onmouseover="over(this)" onmouseout="out(this)">1C</td>
</tr>
<tr>
<td onmouseover="over(this)" onmouseout="out(this)">2A</td>
<td onmouseover="over(this)" onmouseout="out(this)">2B</td>
<td onmouseover="over(this)" onmouseout="out(this)">2C</td>
</tr>
<tr>
<td onmouseover="over(this)" onmouseout="out(this)">3A</td>
<td onmouseover="over(this)" onmouseout="out(this)">3B</td>
<td onmouseover="over(this)" onmouseout="out(this)">3C</td>
</tr>
</table>
</html>

Рекомендую рассматривать как наводку, а не как законченное решение. Лучше бы прочитать в интернете про использованные функции и решения. Понятно также, что прописывание цветов в виде констант в JavaScript коде не есть хорошо, по уму надо менять класс у td. Кроме того, гораздо правильнее было бы не прописывать обработчик у каждой ячейки, а пройтись в цикле по всем ячейкам таблицы (наподобие приведенных здесь циклов) и назначить каждому обработчик динамически, по событию window.onload. Впрочем, за один комментарий JavaScript-у не научишь.

**PuPsAn** · 04.11.2013 15:23

Спасибо всем:) буду пробовать что получится :))

	03.11.2013 12:17 #11
PuPsAn Новичок Регистрация: 05.08.2013 Сообщений: 12 Репутация: 0	ArhStrAngeR, Нет, хочется самому сделать, если хотел бы заказать пошел бы на фрилансер какой нить, а тут надеюсь получить какие то советы или примеры как это можно реализовать.
0 PuPsAn

	03.11.2013 17:44 #12
Даниэль Алиевский Студент Регистрация: 25.10.2013 Сообщений: 62 Репутация: 11	PuPsAn, но это действительно JavaScript. В принципе можно и без классов, просто обработка событий onmouseover и onmouseout для каждого td - с динамическим изменением цвета .style.backgroundColor у соответствующих td в таблице.
0 Даниэль Алиевский

	03.11.2013 19:59 #13
druzhkov Дипломник Регистрация: 15.07.2013 Сообщений: 189 Репутация: 43 Webmoney BL: ?	Сообщение от PuPsAn druzhkov, Можно поподробнее как это сделать? Подробнее, к сожалению, уже не могу - фактически, я вам уже готовый код напишу. :) И так достаточно подробно расписал. Начните с php-кода - найдите кусок, где генерируется таблица, добавьте классы. Потом можно в личке обсудить доработки яваскриптов.
0 druzhkov

	04.11.2013 15:23 #15
PuPsAn Новичок Регистрация: 05.08.2013 Сообщений: 12 Репутация: 0	Спасибо всем:) буду пробовать что получится :))
0 PuPsAn

Темы	Раздел	Ответов	Последний пост
Вопрос по h1-h6 и таблице стилей в wordpress	Вопросы от новичков	6	27.10.2013 22:09
Помощь по таблице на HTML	Web программирование	7	16.09.2013 14:29
Выделение [b][/b] как на Вебмастерс.	Web программирование	10	19.08.2012 15:29
Выделение внешних ссылок с помощью php-функции	Дайджест блогосферы	0	23.10.2010 17:12

Выделение строки и столбца в таблице html

Опции темы

Спасибо сказали:

Тэги топика:

Похожие темы

Вопрос по h1-h6 и таблице стилей в wordpress

Помощь по таблице на HTML

Выделение [b][/b] как на Вебмастерс.

Выделение внешних ссылок с помощью php-функции

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры