Умная подсветка строки таблицы

Статус
Закрыто для дальнейших ответов.

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Пришла такая мысля: для сложных табличных данных (с обведенением ячеек) сделать умную "подсветку"
C реализацией этой идеи тоже возникли трудности. Это я обсуждаю в теме:
Веб-программирование → Javascript / AJAX → Выделение всей строки в таблице

На данный момент прошу оценить саму идею выделения, а не оформление:

http://nng10.ru/pr01.php - HTML
http://nng10.ru/js/price.js - JavaScript
http://nng10.ru/css/price.css - CSS
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Я может что-то не понимаю, но это же всё делается на чистом CSS?!
Да и дивами такую таблицу верстать - глупо. Уже сейчас ячейки плавают. А еще добавим border 1px ....
В общем глюк на глюке, а при воспроизведение в деле - сложно.

А теперь ключевой вопрос - зачем оно может пригодиться?!
 

ALEXu

в сером
Регистрация
29.12.2010
Сообщения
307
Идея-то неплохая, но исполнение. BaNru прав, таблицы должны быть таблицами.
Вот что, как мне кажется нужно добавить:
1. Отделить javascript от HTML
2. Написать универсальный скрипт применимый для любой таблицы.

Тогда это будет круто.
 
  • Like
Реакции: vla

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Мне идея тоже понравилась. И, к сожалению, с помощью tr:hover при данной структуре таблицы проблема не решается. Корректно работает только первая строчка.
А со скриптом придется повозиться. jQuery, думаю, серьезно поможет. И по поводу таблиц - здесь DIV однозначно не подходит!
 
  • Like
Реакции: vla

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
[member=BaNru],[member=ALEXu],[member=tigra60], то что DIV'ы - это тупо - полностью поддерживаю!!! Изначатьно в теме Выделение всей строки в таблице я пытался сделать через TABLE, но так и не нашел решения как это сделать, поэтому отказался в пользу DIV'a...

2. Написать универсальный скрипт применимый для любой таблицы. Тогда это будет круто.
- универсальный? это не ко мне... Я второй раз с JS сталкиваюсь. ))) первый был нехитрый калькулятор (Обработка формы form (input) событием onchange). Я не против, чтобы кто-то осуществил эту идею...
Даже наоборот - был бы рад!!!

Мне идея тоже понравилась.
Особо приятно, что пользователю [member=tigra60], эта идея понравилась! [member=tigra60], было-бы замечательно, если ты осуществишь мою идею в статье у себя на сайте, и попутно дашь советы как мне справиться с моей контретной задачей...
 

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
В первом приближении реализация идеи выглядит так:

Код:
<!DOCTYPE html>
<title>table test</title>
<meta charset="utf-8">
<style type="text/css">
tr {background:#ccc}
td {padding:5px}
</style>

<table>
<tr class="r1"><td rowspan="5" class="r1 r2">Column 1 <td rowspan="2">2 rows <td>Cell 1.1 <td>Cell 1.2 <td>Cell 1.3
<tr class="r1"><td>Cell 2.1 <td>Cell 2.2 <td>Cell 2.3
<tr class="r2"><td rowspan="3">3 rows <td>Cell 3.1 <td>Cell 3.2 <td>Cell 3.3
<tr class="r2"><td>Cell 4.1 <td>Cell 4.2 <td>Cell 4.3
<tr class="r2"><td>Cell 5.1 <td>Cell 5.2 <td>Cell 5.3
<tr class="r3"><td rowspan="5" class="r3 r4">Column 2 <td rowspan="2">2 rows <td>Cell 1.1 <td>Cell 1.2 <td>Cell 1.3
<tr class="r3"><td>Cell 2.1 <td>Cell 2.2 <td>Cell 2.3
<tr class="r4"><td rowspan="3">3 rows <td>Cell 3.1 <td>Cell 3.2 <td>Cell 3.3
<tr class="r4"><td>Cell 4.1 <td>Cell 4.2 <td>Cell 4.3
<tr class="r4"><td>Cell 5.1 <td>Cell 5.2 <td>Cell 5.3
</table>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('td').not('[rowspan]').hover(
function () {
var row = $(this).parent().attr("class");
$(this).parent().css({background:"#ccf"}).parents('table').find('tr.'+row+' td[rowspan]').css({background:"#ccf"});
$('td.'+row).css({background:"#ccf"});
},
function () {
var row = $(this).parent().attr("class");
$(this).parent().css({background:"#ccc"}).parents('table').find('tr.'+row+' td[rowspan]').css({background:"#ccc"});
$('td.'+row).css({background:"#ccc"});
}
);
});
</script>
Просматривается, конечно, диагноз "классицизм", но небольшой - 1-й степени.
Не забудьте, что используется библиотека jQuery.

Подробное объяснение в ближайшее время читайте у меня на сайте.
 

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Подробное объяснение в ближайшее время читайте у меня на сайте.
Хорошо, так и сделаю. Отложу этот вопрос...
Только мне пришла другая идея (возможно применимая только к моей таблице):
Что если сделать несколько <table></table> подряд. Выглядеть будет как одна сплошная таблица, а функция будет одна и таже для каждой <table>
Код:
<table><tr><td rowspan="2">A4</td><td>Ч/Б</td></tr><tr><td>Цвет</td></tr></table>
<table><tr><td rowspan="2">A3</td><td>Ч/Б</td></tr><tr><td>Цвет</td></tr></table><!-- ИТД -->
 
Статус
Закрыто для дальнейших ответов.
Верх Низ