редуване на 2 цвята в javascript

C

cmsfan

Registered
Нали знаете ротацията на банерите ? Искам прост код който да редува винаги (повтарям винаги, а не да запецва) както става понякога при банерите (ако това въобще е възможно) два цвята.

Ето примерни цветове: #ffffff (бяло) и #cccccc (сиво)

Трябва ми за да направя римуване на цветовете в една таблица на tr-тата.


Ще ви помоля да има някаква дефиниция за да го сложа като class="" или поне като id="" въпреки, че предпочитам клас.

Няма да откажа и някакво обяснение.

Знам, че може да стане и с PHP, пробвах доста, ама доста кодове, но уви.. Без успех.
 
С php мога да ти кажа как ще стане.
Код: 
<?php
$i=0;
for($i < 20; $i++){
if($i % 2 == 0){
echo 'html za bqlo';
}
else
{
echo 'html za sivo';
}
}
?>
 
Малка грешка:
Parse error: syntax error, unexpected ')', expecting ';' in /home/public_html/new/includes/last.php on line 5

А после си пиша style='background-color: $i' нали ?
 
[js]var class = 'row1';
function makeRow() {
class = class == 'row1' ? 'row2' : 'row1';
var html = '<tr class="'+class+'">';
.......etc

}[/js]

[css].row1 {
background-color: #ffffff;
}

.row2 {
background-color: #cccccc;
}[/css]
 
Този начин не ми допада. Формата в която искам да манипулирам е в echo и tr-то е там в него.
Май с JS ще е най-добре.
 
Ако таблицата ти се генерира от php по-добре в него си сложи класа, а ако толкова държиш на JS-то - ето ти и javascript:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style> <br>  
      .odd {background-color: #ffffff;}   
      .even {background-color: #cccccc;} 
    </style>  
</head>
<body>
<table id="mytable">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
<script>
    var rows = document.getElementById('mytable').rows;  
    for(i = 0; i < rows.length; i++){ 
        if(i % 2 == 0)
            rows[i].className = "even";  
        else
            rows[i].className = "odd";
</script>
</body>
</html>
 
С този JS код не стана при мен.

Дефинирах класовете и в css, а и така със <style></style> в head таговете. Инклудвах JS-то и в боди и в head - не.
ID-то го слагах и в tr и в table - никакъв ефект.
 
Не мога да се досетя как си нарязал кода и какви фрагменти къде си сложил. Дай си кода така че с копи-пейст да репродуцирам проблема. Както виждаш аз съм ти дал пълен код, който просто като го копираш работи без да правиш нищо друго. :)
 
IzKuFeLiQqQqQ каза:
Eто с jQuery http://api.jquery.com/even-selector/
Увеличете...

Не ме устройва това, защото искам само на това tr да задам това нещо.

Ето повече код:

Код: 
echo "
<tr style='height:35px;'>
<td style='border: 1px solid #ddd;background:#F7F7F7;'><img src='images/threadNewM.png' alt=''/></td>
<td style='border: 1px solid #ddd;background:#F7F7F7; text-align:left;'><div style='padding: 0px 0 0 5px;'>
<a href='forum/viewtopic.php?t=$topic_id' title='$topic_title' target='_top'><b>".$topic_title."</b></a>
</div></td>
<td style='border: 1px solid #ddd;background:#F7F7F7;'><div style='padding: 0px 5px 0 5px;color: #$color'>".$poster."</div></td>
<td style='border: 1px solid #ddd;background:#F7F7F7;'>".$topic_replies."</td>
<td style='border: 1px solid #ddd;background:#F7F7F7;'>".$topic_views."</td>
</tr>
";
}
 
Ето ти един ОО подход. Достъпваш статичното свойство, чрез което се увеличава статична променлива и ако е четна ти дава сиво, ако не е бяло. И можеш да го извикваш на различни места, без да е нужно използването на цикли.


<?php
class Pro {
public static $example = 1;


public static function decide() {
if (self::$example % 2 == 0) {
$color = "#ccc"; // При четно
}
else {
$color = "#fff"; // при нечетно
}
self::$example += 1;
echo $color;
}
}
Pro::decide(); //извиква се статичната функция
Pro::decide();
Pro::decide();
Pro::decide();





PS. Кода на palex най-вероятно не е проработил, защото когато го слагаш в <head> тага или в началото на body-то, кода се изпълнява без да се е заредило DOM дървото и все едно няма нищо в body-to по време на изпълнение на нужния скрипт. Затова трябва да сложиш скрипта във функция и да добавиш EventListener, който при onload на body-то да изпълнява функцията, в която се съхранява нужния скрипт. :)
 
Странна работа, уж работи твоя начин, обаче:
style='background-color:".Pro::decide()." слагам го това в tr-то, а то чак над таблиците го вади резултата и то не в тага, а отделно #fff #ccc #fff #ccc, а съм го задал в самото tr...
От какво може да е това ?

Ето снимка:
c7b0d018af41a395.png
 
cmsfan каза:
IzKuFeLiQqQqQ каза:
Eто с jQuery http://api.jquery.com/even-selector/
Увеличете...

Не ме устройва това, защото искам само на това tr да задам това нещо.
Увеличете...

е добре де просто направиш кода така:

PHP: 
<!DOCTYPE html>
<html>
<head>
  <style>

  table {
    background:#eeeeee;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1" [b][size=7]id="only"[/size][/b]>
    <tr><td>Row with Index #0</td></tr>
    <tr><td>Row with Index #1</td></tr>

    <tr><td>Row with Index #2</td></tr>
    <tr><td>Row with Index #3</td></tr>
  </table>
<script>$("[b][size=7]#only[/size][/b] tr:even").css("background-color", "#bbbbff");</script>

</body>
</html>

и става само за таблицата с id only!
 
Това нещо не работи.
Много сме близо до нещата, само да се оправи това за което написах в последния пост на предишната страница и всичко ще стане.
 
За да проработи както трябва кода на @nbacool2, трябва да смениш реда
PHP: 
echo $color;
го замени със
PHP: 
return $color;
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе