Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   Создание таблицы (http://forum.oszone.net/showthread.php?t=30926)

Vadikan 23-10-2004 08:55 212086
Доброго времени суток!

Озадачился я вопросом о создании таблицы с чередующимся фоном строк. Допустим я задаю фон каждой строки через <tr bgcolor="mycolor">. Однако, если мне надо вставить одну строку в середину таблицы, то вся последовательность фонов сбивается. Менять вручную как-то неправильно кажется, и наверняка существует решение задачи, о котором мне пока неизвестно. Может фон надо как-то иначе задавать? Подскажете?

Спасибо за внимание.

[s]Исправлено: Vadikan, 8:56 23-10-2004[/s]

archy 23-10-2004 12:18 212087
к сожалению телепаты не вернулись еще из отпуска
В какой проге рисуем таблицы?
В обычных html редакторах это возможно с применением скриптования (если сие возможно), иначе никак, можно поискать специализированные тулзы для таблиц, IMHO!

vadimiron 23-10-2004 12:52 212088
Можно ещё с помощью CSS
Для всех TR задать в таблице стилей один цвет
А для исключений сделать свой ID, и вставлять его там, где нужен отличный от стандартного цвет
То есть это всё примерно так будет выглядить:
Код:
<tr></tr> - здесь будет стандартный цвет
<tr id=other_color></tr> - а здесь НЕстандартный

archy 23-10-2004 15:00 212089
vadimiron
И чем это отличается от bgcolor='mycolor' ?

mar 23-10-2004 15:44 212090
если страница не статическая, то генерить id с прибавлением 1 и дальше всем td с четным id назначить один цвет, с нечетным - другой (вызывая соответствующую функция bp <bоdy onLoad"=функция()">
Если статика - хуже. Можно все-таки попробовать генерировать id строчек атоматически (например, задействовав какую-то JavaScript переменную и загоняя туда id=эта переменная ++), а дальше, как выше, но сдается мне, что эта самая JavaScript-овская генерация не такой простой зверь, как кажется =(

vadimiron 23-10-2004 15:45 212091
archy
Так в этом то и есть смысл CSS, например у меня 100 ячеек, и вдруг захотелось изменить у них bgcolor, тогда я вместо того, что руками меняю у каждой ячейки bgcolor='mycolor', просто лезу в файл со стилями и изменяю всего один параметр и всё
Это намного удобней и более читабельно

mar 23-10-2004 16:00 212092
я тут еще подумала (насчет автоматического генерации id для статических таблиц) - может быть проще будет воспользоваться id таблицы и поиграть свойствами firstchild и т.д. (но только для броузеров, понимающих DOM)

vadimiron
проблема в том, что, судя по всему, Вад хочет создать табличку (строк эдак на полтораста, а потом вставить туда строку, скажем между 75 и 76-ой (раздвинуть ряды) и не хочет переписывать не свойства, ни id у всех рядов с 77 по 150)

archy 23-10-2004 16:40 212093
vadimiron
Ту не внимательно прочитал вопрос видимо :)
mar
может Javascript пробежаться по всей таблице (<tr>) и разукрасить ее как надо? Или мы об одном и том же?
/me погряз в скриптовании...

mar 23-10-2004 16:49 212094
archy
об одном =)
придумала (только это для броузеров, поддерживающих DOM):
Код:

<html>
<head>
<title>test</title>
<script>
<!--
  function color_trs() {
 
var table = document.getElementById("t");
 
var trs = table.getElementsByTagName("tr");
var count = trs.length;
for (var i = 0; i < count; i++) {
if (Math.round(i/2) == (i/2) )
trs[i].style.backgroundColor="blue";
else
trs[i].style.backgroundColor="yellow";
}        
 
 }
 // -->
</script>
</head>
<BODY onLoad="color_trs();">
 
<table id="t" border="5">
<tr><td>1</td><td>2</td></tr>
<tr><td>4</td><td>5</td></tr>
        <tr><td>7</td><td>6</td></tr>
<tr><td>8</td><td>9</td></tr>
<tr><td>10</td><td>11</td></tr>
</table>
 
</body>
</html>
результат можно глянуть тут

Добавлено:

вот та же функция, но работающая для всех таблиц документа:
Код:
 function color_trs() {
        
        var trs, trs_count, j;
        // массив элементов с именем тега table
       var tables = document.getElementsByTagName("table");
      var tables_count = tables.length;
      for (var i = 0; i < tables_count; i++) { // для каждой таблицы
        // массив элементов с именем тега tr
        trs = tables[i].getElementsByTagName("tr");
        trs_count = 0;
        trs_count = trs.length;
        for (j = 0; j < trs_count; j++) { // для каждой строки
                       // назначаем четным и нечетным разные цвета фона
                     if (Math.round(j/2) == (j/2) )
             trs[j].style.backgroundColor="blue";
                    else
trs[j].style.backgroundColor="yellow";
        }        
    }
 }
пример можно посмотреть тут

(что-то какая-то ерунда с форматированием кода, ну да ладно - желающие могут брать его из примеров)

[s]Исправлено: mar, 18:05 23-10-2004[/s]

Vlad Drakula 23-10-2004 20:47 212095
мне тоже очень интересен этот вопрос тоже очень интересен, но вот а если браузер не поддерживает дом и если не хочентся это прописывать в ПХП скриптах?

mar 23-10-2004 21:32 212096
Vlad Drakula
DOM первого уровня (а тут применялся только он) поддерживается в Netscape >=6 (и, соответственно Mozilla (я проверила на Mozilla 1.4b - *сборка - Gecko/20030507)) , Explorer>= 5, Konqueror, *а также Opera >= 4 с ограничениями, но в уже довольно старой опере 7.0 этот скрипт идет (о тестированиии броузеров уже позовчерашнего =) дня на совместимость с getElementsByTagName() можно почитать тут) Так что при всем моем уважению к кроссброузерности, сейчас (причем уже пару лет как), похоже, можно смело писать подобного рода функции, добавив для собственного спокойствия в начало что-нибудь вроде
Код:
if(!getElementsByTagName())
 * * *retutn true;
(хотя NN4,7 и Opera5 не возмущались и без этого, хотя и таблицы, понятное дело не красили =))
Ну, или поупражняйся с document.write (хотя по-моему будет кривовато получится, если вообще выйдет)

[s]Исправлено: mar, 21:35 23-10-2004[/s]

FADE 23-10-2004 22:10 212097
mar
DOM - это динамическая объектная модель? можно поподробней об этом?:) :biglaugh:

mar 23-10-2004 22:31 212098
FADE
Могу ведь и послать... *на w3.org:biglaugh:
Про DOM очень хорошая статья была у PPK (Peter-Paul Koch ) Тут нынешний адрес статьи. *А выше я уже давала ссылку на ее перевод (когда-то меня хватило на перевод нескольких статей, а потом текучка заела :( - все те, которые несколько, лежат там же )
Почитай - там, в общем, достаточно подробно =)
Еще там дана очень важная вещь - сводные таблицы совместимости (Compatibility tables) * объектов DOM в разных броузерах. То, что я перводила на русский касается более старых броузеров, - но может быть, именно по-этому и стоит посмотреть

Vadikan 23-10-2004 23:05 212099
Ого! Вебмастера разошлись :) Большое спасибо всем за ответы.
Цитата:
Цитата archy
оффтопик: к сожалению телепаты не вернулись еще из отпуска
В какой проге рисуем таблицы?
Я правильно связал оффтопик с вопросом? Хм... а разве есть принципиальная разница в подходе к решению проблемы? Что ж... в Блокноте :)  Если же речь о том, статическая таблица или нет, то критику принимаю: статическая.
Цитата:
Цитата mar
проблема в том, что, судя по всему, Вад хочет создать табличку (строк эдак на полтораста, а потом вставить туда строку, скажем между 75 и 76-ой (раздвинуть ряды) и не хочет переписывать не свойства, ни id у всех рядов с 77 по 150)
Именно, ну пусть количество строк поменьше. Оно относительно невелико, и можно руками переписывать. А что если мне раз в неделю надо делать это? Отсюда и вопрос возник.
Цитата:
Цитата mar
придумала (только это для броузеров, поддерживающих DOM):
Вот именно что-то такое я и ожидал увидеть. Просто писать
Код:
var count = trs.length;
for (var i = 0; i < count; i++) {
if (Math.round(i/2) == (i/2) )
trs[i].style.backgroundColor="blue";
else
trs[i].style.backgroundColor="yellow";
}        
такие вещи я не умею :( Что же касается совместимости с браузерами, то любой человек не обновлявший браузер более года элементарно рискует получить большие проблемы из-за уязвимостей браузера. Так что некорректное отображение страниц в старых браузерах меня мало волнует.

Я попробую применить это к моей таблице и сообщу о рез-татах.  

Vlad Drakula 24-10-2004 09:04 212100
Vadikan
ты не совсем прав, у меня все динамическое просто мне с одной стороны не хочется лесть в код, а стругой стороны я борюсь за чистоту кода!

Vadikan 24-10-2004 10:59 212101
Vlad Drakula
Хм.... как прикажешь тебя понимать, Саид? (с) Белое солнце пустыни

Vadikan 29-10-2004 02:19 212102
Ок, я все сделал. Все получилось именно так, как я и задумывал, задавая вопрос :) Спасибо, mar!

Vlad Drakula 29-10-2004 18:36 212103
Vadikan
а почему все статика а не динамика?

Vadikan 29-10-2004 21:56 212104
Vlad Drakula
Банальный ответ - потому, что не умею иначе. Однако, если ты мне расскажешь о преимуществах динамики над статикой в моем конкретном случае, то я буду признателен.

Prisoner 30-10-2004 02:26 212105
Имхо она и не нужна - геморрой не стоит свеч. Одна табличка, страниц не так уж и много, а информация слабо формализуема. (Простите, что вмешиваюсь...)


Время: 10:54.

Время: 10:54.
© OSzone.net 2001-