Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   JS против jquery. Раскрасить четные строки (https://javascript.ru/forum/misc/17795-js-protiv-jquery-raskrasit-chetnye-stroki.html)

eXtreme 03.06.2011 11:20

JS против jquery. Раскрасить четные строки
 
Нашел в нете пример. Есть таблица. Нужно четным строкам таблицы присвоить класс color при помощи чистого javascript.
на jquery все просто и понятно.

<script language="javascript" type="text/javascript">
 $("tr:nth-child(color)").addClass("color");
 </script>


Еще пример на чистом js

<script language="javascript" type="text/javascript">
var tables = document.getElementsByTagName("table");
for ( var t = 0; t < tables.length; t++ ) {
var rows = tables[t].getElementsByTagName("tr");
for ( var i = 1; i < rows.length; i += 2 )
if ( !/(^|s)color(s|$)/.test( rows[i].className ) )
rows[i].className += "color";}
</script>


Ну тут мне вообще только первые 5-6 строк понятны. Есть ли более адекватная возможность сделать это?. Просто последние 2 строки вообще наводят на непонятные мысли. Спасибо большое.

Matre 03.06.2011 11:27

Цитата:

Есть ли более адекватная возможность сделать это?
Код нормальный.

Почитайте про регэкспы.

eXtreme 03.06.2011 11:37

о спасибо

monolithed 03.06.2011 11:40

<script type="text/javascript">
window.onload = function(){
    var li = document.getElementById('ul').children, i = li.length;
    while(i--) {
        li[i].style.backgroundColor = i%2 ? 'red' : 'green';
    }
};
</script>

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

eXtreme 03.06.2011 11:50

а может кто если кому не сложно описать что происходит в каждой строке? как можно подробнее. Спасибо.

eXtreme 03.06.2011 11:52

Цитата:

Сообщение от monolithed (Сообщение 107182)
<script type="text/javascript">
window.onload = function(){
    var li = document.getElementById('ul').children, i = li.length;
    while(i--) {
        li[i].style.backgroundColor = i%2 ? 'red' : 'green';
    }
};
</script>

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

А мне надо отыскать в таблице четные строки tr и присвоить им класс color

monolithed 03.06.2011 13:19

Цитата:

Сообщение от eXtreme
А мне надо отыскать в таблице четные строки tr и присвоить им класс color

смысл тот же, нужно сделать выборку (или проверку) на TR и заменить .style.backgroundColor на .className.

nikita.mmf 03.06.2011 14:05

Захотелось немного подправить ваш скрипт
var tables = document.getElementsByTagName("table");
for ( var t = 0; tables[t]; t++ ) {
  var rows = tables[t].getElementsByTagName("tr");
  for ( var i = 1; rows[i]; i+=2 ) {
    if ( (" " + rows[i].className + " ").indexOf(" color ") < 0  ) {
      rows[i].className = rows[i].className ? rows[i].className + " color" :  "color";
    }
  }
}

nyshka 02.06.2015 11:06

а шахматкой на jqery как сделать???

Василий12330 02.06.2015 11:11

А почему не сделать через CSS с помощью псевдокласса :nth-child ?


Часовой пояс GMT +3, время: 01:53.