Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

Создание линеек («зебры») в таблицах. (Vasiliy)
Author Message
Vasiliy
Участник форума



Joined: 16 Mar 2004
Posts: 50
Карма: 0
   поощрить/наказать


PostPosted: Wed Mar 23, 2005 6:22 pm (написано за 17 секунд)
   Post subject: Линейки в таблицах
Reply with quote

Собственно ничего нового, но может кому-то и пригодиться.
Весь код нагло содрал из статьи «Линейки в таблицах» webmascon.com/ .
Изменения заключается в том, что:
1) «Зебра» получается сразу после загрузки таблицы
2) Манипулирование не именем класса, а непосредственно опр. стилем объекта (для меня это более приемлемо)

В JavaScript я не особо …. так, что сильно не кричите, а просто поправьте.
Code (html): скопировать код в буфер обмена
<html> (december.com/html/4/element/html.html)
<head> (december.com/html/4/element/head.html)
<title> (december.com/html/4/element/title.html)Untitled Document</title>
<meta (december.com/html/4/element/meta.html) http-equiv="Content-Type" content="text/html; charset=windows-1251"> (december.com/html/4/element/.html)
<style (december.com/html/4/element/style.html) type="text/css"> (december.com/html/4/element/.html)
table.ruler{background-color:#666666;border:0;}
table.ruler caption {font-weight:bold; text-align:left;}
table.ruler th{background-color: #CCCCCC;font-weight:bold;border:0;}
table.ruler tr {background:#f7f7f7}
table.ruler tr.tr1 {background:#00ffff}
table.ruler tr.tr2 {background:#ffff00}
tr.ruled{background:#efefef;}
</style>

<script (december.com/html/4/element/script.html) type="text/javascript"> (december.com/html/4/element/.html)
function tableruler(){
         if (document.getElementById && document.createTextNode){
                        var tables=document.getElementsByTagName('table');

                        for (var i=0;i<tables.length;i++){
                                if(tables[i].className=='ruler'){
                                        var trs=tables[i].getElementsByTagName('tr');
                                        for(var j=0;j<trs.length;j++){
                                                if(trs[j].parentNode.nodeName=='TBODY'){
                                                        // модификация таблицы
                                                        if ( (j%2) == 0) trs[j].className='tr1';
                                                        else trs[j].className='tr2';                                                               
                                                       
                                                        // обработка событий
                                                        trs[j].onmouseover=function(){this.style.backgroundColor='#efefef';return true;}
                                                        trs[j].onmouseout=function(){this.style.backgroundColor='';return true;}                                               
                                                }

                                        }
                                }
                        }
         }
}

</script>

</head>

<body (december.com/html/4/element/body.html) onLoad="tableruler();"> (december.com/html/4/element/.html)

<table (december.com/html/4/element/table.html) cellpadding="1" cellspacing="1" class="ruler" width="300" > (december.com/html/4/element/.html)
        <caption> (december.com/html/4/element/caption.html)example</caption>
        <thead> (december.com/html/4/element/thead.html)<tr> (december.com/html/4/element/tr.html)<th (december.com/html/4/element/th.html) scope="col"> (december.com/html/4/element/.html)Artist</th><th (december.com/html/4/element/th.html) scope="col"> (december.com/html/4/element/.html)Title</th></tr>< (december.com/html/4/element/.html)/thead>
        <tbody> (december.com/html/4/element/tbody.html)
          <tr> (december.com/html/4/element/tr.html)<td> (december.com/html/4/element/td.html)example</td><td> (december.com/html/4/element/td.html)example</td></tr>
          <tr> (december.com/html/4/element/tr.html)<td> (december.com/html/4/element/td.html)example</td><td> (december.com/html/4/element/td.html)example</td></tr>
          <tr> (december.com/html/4/element/tr.html)<td> (december.com/html/4/element/td.html)example</td><td> (december.com/html/4/element/td.html)example</td></tr>
          <tr> (december.com/html/4/element/tr.html)<td> (december.com/html/4/element/td.html)example</td><td> (december.com/html/4/element/td.html)example</td></tr> 
          <tr> (december.com/html/4/element/tr.html)<td> (december.com/html/4/element/td.html)example</td><td> (december.com/html/4/element/td.html)example</td></tr>
          <tr> (december.com/html/4/element/tr.html)<td> (december.com/html/4/element/td.html)example</td><td> (december.com/html/4/element/td.html)example</td></tr> 
        </tbody>
</table>

</body>
</html>
Back to top
View user's profile Send private message
Евгений Галашин
Модератор



Joined: 29 Dec 2003
Posts: 1861
Карма: 32
   поощрить/наказать


PostPosted: Wed Mar 23, 2005 10:49 pm (спустя 4 часа 27 минут; написано за 29 секунд)
   Post subject:
Reply with quote

Поправка: Вообще-то, оригинал статьи находится на alistapart.com
Back to top
View user's profile Send private message
Дмитрий Котеров
Администратор



Joined: 10 Mar 2003
Posts: 13665
Карма: 413
   поощрить/наказать


PostPosted: Sun Mar 27, 2005 12:45 pm (спустя 3 дня 13 часов 55 минут; написано за 29 секунд)
   Post subject:
Reply with quote


М

Не мусорить тут! Обсуждение ведется в отдельном топике, согласно Правилам форума.

Ветка выделена в отдельную тему «Создание линеек («зебры») в таблица (обсуждение).»,
расположенную в форуме Разное :: JavaScript (27 Марта 2005, 12:45).
Back to top
View user's profile Send private message Send e-mail
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML