Форум Сайтостроение Веб-строительство

разный цвет каждой второй строк

12
rtyug
На сайте с 13.05.2009
Offline
263
rtyug
1287

есть ли какой-то документация по понтянее этой http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#structural-pseudos

на JavaScript это можно сделать?

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


var tr = document.getElementById('qw').getElementsByTagName('tr');

var trc = tr.length;

var x;

for(var i = 0; i < trc; i++) {

    x = (i%2) ? 'white' : 'black';

    tr.className = x;

}



<table id="qw">

<tr><td>....</td><td>....</td><td>....</td></tr>

<tr><td>....</td><td>....</td><td>....</td></tr>

<tr><td>....</td><td>....</td><td>....</td></tr>

<tr><td>....</td><td>....</td><td>....</td></tr>

<tr><td>....</td><td>....</td><td>....</td></tr>

<tr><td>....</td><td>....</td><td>....</td></tr>

</table>



.white td { background: #ffffff; }

.black td { background: #cccccc; }

таблица должна быть именно такая?

id="qw" должен с чем-то связываться?

таблица которуя вверху должна быть именно такая?

вот 2log_table2 который нигде не обявляется и не используется 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />

    <title>Просмотр разделов</title>

     <script type='text/javascript'>

     var tr = document.getElementById('2log_table2').getElementsByTagName('tr');

var trc = tr.length;

var x;

for(var i = 0; i < trc; i++) {

    x = (i%2) ? 'white' : 'black';

    tr.className = x;

}

     

     </script>    

    

</head>

<body>



 <table id="2log_table2" border="0">  

           

<col width="300">           

            

<col width="auto">

<col width="auto">

<col width="auto">

<col width="auto">

      

     

            

           

           

     

   <tr class="header">

    <td><a href="/view_section/13?sort=name-asc">разделы  </a></td>

    <td>число подразделов</td>

    <td>число тем</td>

    <td><a href="/view_section/13?sort=username-asc">автор </a></td>

    <td><a href="/view_section/13?sort=time-asc">дата   <img src="/images/sort_down.gif" alt="" />   </a></td>

    

     

  

           

   </tr>

      

        

      <tr class="hilightoff" onmouseover="className='hilighton2'; this.style.cursor='hand';" onmouseout="className='hilightoff';">

            <td>        

           <a target="_top" href="/view_section/54">dfgdfg</a> 

           <br>

            </td> 

            

               <td>8</td>

                

          <td >        

                <a alt="Посмотреть темы в этом разделе" title="Посмотреть темы в этом разделе" target="_top" href="/view_content_head/54">- (посм. темы в разделе) </a>            

          </td>

          

             <td><a alt="test02" title="test02" href="/profile/view_profile/2"><b>test02</b></a></td>

            <td>1241883643</td>

             

      

     

     

               

            

     

            

                   

      </tr>

    

        

      <tr class="hilightoff" onmouseover="className='hilighton2'; this.style.cursor='hand';" onmouseout="className='hilightoff';">

            <td>        

           <a target="_top" href="/view_section/20">f2</a> 

           <br>

            </td> 

            

               <td>2</td>

                

          <td >        

                <a alt="Посмотреть темы в этом разделе" title="Посмотреть темы в этом разделе" target="_top" href="/view_content_head/20">- (посм. темы в разделе) </a>            

          </td>

          

             <td><a alt="test01" title="test01" href="/profile/view_profile/1"><b>test01</b></a></td>

            <td>1238779255</td>

             

      

     

     

               

            

     

            

                   

      </tr>

    

        

      <tr class="hilightoff" onmouseover="className='hilighton2'; this.style.cursor='hand';" onmouseout="className='hilightoff';">

            <td>        

           <a target="_top" href="/view_section/19">упвап ва п</a> 

           <br>

            </td> 

            

               <td>2</td>

                

          <td >        

                <a alt="Посмотреть темы в этом разделе" title="Посмотреть темы в этом разделе" target="_top" href="/view_content_head/19">- (посм. темы в разделе) </a>            

          </td>

          

             <td><a alt="test01" title="test01" href="/profile/view_profile/1"><b>test01</b></a></td>

            <td>1238778699</td>

             

      

     

     

               

            

     

            

                   

      </tr>

    

    

            </td>

  </tr>

  </table>
Спалил тему: Pokerstars вывод WMZ, etc на VISA 0% или SWIFT + Конверт USD/GBP,etc (net profit $0,5 млрд) (https://minfin.com.ua/blogs/94589307/115366/) Monobank - 50₴ на счет при рег. тут (https://clck.ru/DLX4r) | Номер SIP АТС Москва 7(495) - 0Ꝑ, 8(800) - 800Ꝑ/0Ꝑ (http://goo.gl/XOrCSn)
K
На сайте с 28.12.2008
Offline
61
kud
#1

Ваш код не заработает, потому что скрипт вызывается до того как загрузилась таблица. То есть, строка: 

var tr = document.getElementById('qw').getElementsByTagName('tr');
не работает, так как таблицы еще нет.

Вставте код после таблицы.

kil
На сайте с 03.04.2006
Offline
84
kil
#2

Так вы и привели код на javascript! Он как раз выполняется у клиента! 

 document.getElementById('qw').getElementsByTagName('tr');
- тут указан id таблицы, в которой необходимо изменить цвет ячеек.

+ не забываем про onload - т.е. выполнение после загрузки документа. Или же выполнение скрипта должно проходить после загрузки соответствующего куска кода.

Обновленная версия скриптов от Краулеры Ahrefs теперь обрабатывают Добавьте налоговую информацию
rtyug
На сайте с 13.05.2009
Offline
263
rtyug
#3
kud:
Ваш код не заработает, потому что скрипт вызывается до того как загрузилась таблица. То есть, строка:
var tr = document.getElementById('qw').getElementsByTagName('tr');
не работает, так как таблицы еще нет.
Вставте код после таблицы.

на сколько я знаю, на сколько я читал и на сколкьо мне говорили

JS с начало в любом случае выполниться в браузере где бы он не был... куда его вставить?

rtyug добавил 27.09.2009 в 00:02

kil:

+ не забываем про onload - т.е. выполнение после загрузки документа. Или же выполнение скрипта должно проходить после загрузки соответствующего куска кода.

извините, не понял, как это сделать?

[Удален]
#4

window.onload=function()

{

здесь код

}

rtyug
На сайте с 13.05.2009
Offline
263
rtyug
#5

а куда это вставить в цикл или куда?

что должно быть через onload?

===

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

П
На сайте с 08.06.2007
Offline
63
Патапыч
#6

Вчера ещё по быстрому накидал.. 

<style type="text/css">

.style1 {background-color: #006699;}

.style2 {background-color: #66CCCC;}

</style>

<script>

function myFunc(id_) {

  var tr = document.getElementById(id_).getElementsByTagName('tr');

  for (var i = 0, len = tr.length; i < len; i++) tr.className = (i % 2) ? 'style1' : 'style2';

  // или for (var i = 0, len = tr.length; i < len; i++) tr.style.backgroundColor = (i % 2) ? '#006699' : '#66CCCC';

}

</script>

<table width="80%" id="id_table">

<tr><td>&nbsp;</td></tr>

<tr><td>&nbsp;</td></tr>

<tr><td>&nbsp;</td></tr>

<tr><td>&nbsp;</td></tr>

</table>

<script>

myFunc('id_table');

// или <body onload="myFunc('id_table');">

// или ещё как neolord подсказывает. Но это уже не принцыпиально.

</script>
я использую шаблонизатор, и вывожу через цикл в таблицу..

Использовать вы можете всё что угодно.. Главное ID (в данном случае) задайте для таблицы.

ЗЫ. Возможны ещё варианты.

rtyug
На сайте с 13.05.2009
Offline
263
rtyug
#7

спасибо!

подскажите как сделать если таблица такая?


<table id="qw">
// первая строка должно быть белого цвета
<tr><td>....</td></tr> <tr><td>....</td></tr>

// вторая строка должно быть серого цвета
<tr><td>....</td></tr> <tr><td>....</td></tr>

// третья строка должно быть белого цвета
<tr><td>....</td></tr> <tr><td>....</td></tr>

// четвертая строка должно быть серого цвета
<tr><td>....</td></tr> <tr><td>....</td></tr>
</table>

вопрос простой, просто я не могу понять как это сделать логически

[Удален]
#8

Хватит изголяться, есть решение jquery простейшее

$(document).ready(function(){		
	$("#qw tr:odd").css('background-color', '#FAFAFA');
});

либо 

$(document).ready(function(){		
	$("#qw td:odd").css('background-color', '#FAFAFA');
});
rtyug
На сайте с 13.05.2009
Offline
263
rtyug
#9
KosoyRoman:
Хватит изголяться, есть решение jquery простейшее 
$(document).ready(function(){		

	$("#qw tr:odd").css('background-color', '#FAFAFA');

});

либо 
$(document).ready(function(){		

	$("#qw td:odd").css('background-color', '#FAFAFA');

});

спасибо, как это сделать так как я написал в предыдущем посте?

rtyug добавил 29.09.2009 в 05:45

сделал там надо было заменить вот так:

x = (i%4)<2

ЗЫ: форум вроде бы не давал писать в подряд сообщения? сейчас что-то написал... удалить не могу

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
rtyug
На сайте с 13.05.2009
Offline
263
rtyug
#10

а подскажите пожалукйста, как сделать чтобы первая "строка" не разукрашивалась, а игнорировалась

<tr><td>....</td></tr>

а все последудующие разукрашивались...

<tr><td>....</td></tr> - не разукрашивать

<tr><td>....</td></tr> разукрашивать 0
<tr><td>....</td></tr> разукрашивать 1 
<tr><td>....</td></tr> разукрашивать 0
<tr><td>....</td></tr> разукрашивать 1

UPD:

сделал

я протупил, проверить i=1 чтобы было

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий