Javascript-форум - JS против jquery. Раскрасить четные строки

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)

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 строки вообще наводят на непонятные мысли. Спасибо большое.

Цитата:

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

Код нормальный.

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

<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>

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

Цитата:

Сообщение от 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

Цитата:

Сообщение от eXtreme

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

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

Захотелось немного подправить ваш скрипт

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";
    }
  }
}

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

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

задание такое шахматкой на jqery, на чистом js сделала...а на jqпока не выходит..

nyshka,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td  {
     width: 50px;
     height: 50px

  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var tr = $("tbody tr");
       tr.each(function(indx, el){
             var i = indx % 2;
             $("td", el).filter( [":even",":odd"][i] ).css({"backgroundColor" : "rgb(0, 0, 255)"})
             });
});


  </script>
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
        <tr>
			<td>Cell 3.1</td>
			<td>Cell 3.2</td>
			<td>Cell 3.3</td>
		</tr>
		<tr>
			<td>Cell 4.1</td>
			<td>Cell 4.2</td>
			<td>Cell 4.3</td>
		</tr>
	</tbody>
</table>


</body>

</html>

Цитата:

Сообщение от eXtreme

на чистом js

<html>
<head>
<style>
.color{
   background: red
 }
table td{
 border: 1px solid black;
 width: 20px;
 height: 20px
}
</style>

</head>

<table>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
</table>

<body>

<script>

$=function(sel){
 var o=Object.create($)  
 o.arr = [].map.call(document.querySelectorAll(sel), function(el){return el})
 return o
}
$.prototype=$
$.odd=function(){this.tmp=this.arr.filter(function(el, i){return i%2===0}); return this}
$.addClass=function(className){
 this.tmp.forEach(function(el){el.className+=className; return this})
}


$("tr").odd().addClass("color")




</script>

</body>
</html>

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