Jump to content
  • 0

Поочередня смеца цвета в таблице ("even td")


Пятница
 Share

Question

Есть таблица большая, вот она http://dnipro.dp.ua/archi/

К каждой строке прописан свой цвет,

<TR>
<TD bgcolor=#E8E8E8>Здание такое-то</TD>
<TD bgcolor=#E8E8E8>Описание здания</TD>
<TD bgcolor=#E8E8E8>36 эт.</TD>
</TR>

<TR>
<TD bgcolor=#CFCFCF>Здание такое-то</TD>
<TD bgcolor=#CFCFCF>Описание здания</TD>
<TD bgcolor=#CFCFCF>24 эт.</TD>
</TR>

<TR>
<TD bgcolor=#E8E8E8>Здание такое-то</TD>
<TD bgcolor=#E8E8E8>Описание здания</TD>
<TD bgcolor=#E8E8E8>21 эт.</TD>
</TR>

.... и так можно до бесконечности.

Конешно как вы уже поняли, это гемор полный, особенно для моей таблице, в которой более 70-ти зданий и проектов.

Очень тяжко для каждой строки придавать вручную свой цвет, и скажу откровенно меня это уже зае**ло!!!:):):o

Список не стоит на месте, постоянно добавляются новые здания и проекты, поетому приходится переделывать весь список, дабы поставить новое здание в нужное место (сортировка по высоте и статусу), и чтобы не нарушить очередность цветов (темный, светлый, темный, светлый....), приходится каждой строке придавать свой цвет.

ЗАТЕМ.

Узнал о таком прекрасном свойстве в CSS как "even".

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

Ход действительно хороший, но опять же.

Мне приходится каждой второй строке придавать значение tr class="even".

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

Вопрос: как сделать так, чтобы каждая вторая ячейка автоматически меняла цвет после предыдущей ячейки?

Чтобы первая допустим была белая, другая черная, третья белая и т.д.

Спасибо за помощь, юзал гугль - не нашел (не смог правильно задать вопрос).

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0

подобный вопрос уже обсуждался на этом форуме, можно поискать..

вот, то, что я использую у себя.. оно правда не идеально, но все же..

<script type="text/javascript">
function Polosa(table_id) {
var table = document.getElementById(table_id);
if (! table) {
return;
}
var tris = table.getElementsByTagName("tr");
var fo = 0;
for(var i=0; i< tris.length; i++ ) {
tris[i].className = (fo ? 'x_one' : 'x_two');
fo = ( fo ? 0 : 1 );
}
}

function Runis() {
Polosa('polosatik');
}
window.onload = Runis;
</script>

таблице присваиваем id="polosatik", после нее печатаем этот код и готово :)

Link to comment
Share on other sites

  • 0
http://www.simplebits.com/publications/bulletproof/code/

качни один из двух экзамплов, открой - chapter7, там есть самые точные примеры, по всем правилам CSS.

Скачал, таже фишка, оно требует присваивать по классу каждой строке:

 <li class="alt">Строка 1</li>
<li>Строка 2</li>
<li class="alt">Строка 3</li>
<li>Строка 4</li>

http://www.citforum.ru/internet/xmlxslt/xmlxslt.shtml

помотай - там есть пример с чередованием...

Пролистал - нашел пример, только вот этот язык вообще не знаю, только начинаю осваивать CSS, а тут мне вообще ничег оне понятно, буду искать более легкий путь((

подобный вопрос уже обсуждался на этом форуме, можно поискать..

вот, то, что я использую у себя.. оно правда не идеально, но все же..

Код

таблице присваиваем id="polosatik", после нее печатаем этот код и готово :)

Неа, что-то не выходит, присвоил таблице

Цвет не меняется.

Может не туда код леплю? В какую часть сайта лепится сей код? Пробовал и в шапку, и в контент, и в Див, в котором расположена таблица - результат 0.

Link to comment
Share on other sites

  • 0
<script type="text/javascript">
function Polosa(table_id) {
var table = document.getElementById(table_id);
i........</script>

.... :) можно чуть меньше строчек прописать в CSS и добиться того же результата, правда в каждом

надо будет прописывать class.. Простите, что умничаю) - пример с js - хорош!, но не сработает у тех, у кого отключена скриптура... и что тогда? крассавчег дизайн в топку?))

О! А можно поподробнее? У меня не катит....

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

класс.
Link to comment
Share on other sites

  • 0

Кстати, вот пример, это наш сетевой файловый архив http://bugzilla.dp.ua/

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

Link to comment
Share on other sites

  • 0
Кстати, вот пример, это наш сетевой файловый архив http://bugzilla.dp.ua/

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

и опять же, там прописаны классы у начальных

Вообще я не встречал, чтобы без всяких изменений, менялся цвет каждого второго tr -- если только с помощью php или js... но если у тебя какая-нибудь cms-ка, то для таких случаев, прописывают цикл php в ручную всего два разных tr или хотя бы один, а потом уже при добавлении а админке блока, php вс? делает за тебя :) В общем что это я...

Link to comment
Share on other sites

  • 0

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

tris.className = (fo ? 'x_one' : 'x_two');
Link to comment
Share on other sites

  • 0
Кстати, вот пример, это наш сетевой файловый архив http://bugzilla.dp.ua/

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

Дык там же перловый сценарий отда?т так как прописали... Он и перебирает вс? и цвета назначает...

А автоматизировать и не думать о количестве строк в таблице и назначении классов позволяет xml+xslt! Огромный плюс в том, что ваши данные храняться в xml и отображаться могут так как вы напишете xslt. Захотите - немного подправите xslt и весь контент будет отображаться совершанно по другому!

Link to comment
Share on other sites

  • 0
Простите, что умничаю) - пример с js - хорош!, но не сработает у тех, у кого отключена скриптура... и что тогда? крассавчег дизайн в топку?))

Табличка в зебру ? дело второстепенное для восприятия информации, можно и на яву повешать.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy