Помогни ни да направим Uroci.net по - богат! Добави урок

Как да направим така, че редовете през ред да са различни с javascript?

qlayer   трудност:    видян: 4079

Как да направим така, че  редовете през ред да са различни с javascript?

Бих искал да споделя с вас един скрипт, който ми се наложи да напиша за домашно към безплатния курс на Телерик за front-end development . В случая задачата ми беше да направя така, че background-color на всеки ред на определена таблица да е различено оцветен през ред. По принцип това може да бъде постигнато много лесно и само с CSS (чрез селектора :nth-child() ), но тогава ще пренебрегнем потребителите използващи IE =<  8. Друг вариант би бил да използваме jquery, но да кажем че “Не познаваме такова животно”.


Бих искал да отбележа, че това е далеч от перфектния начин за постигане на целта, но ще свърши работа като за начало.

Нека започнем като дефинираме един CSS клас, с който ще оцветяваме редовете :

       .alt  {
               background-color:rgb(227,240,248);

           color:#000000;

       }

Редовете по-долу описват въпросния скрипт (внимание скрипта трябва да се сложи след целия html):
          

function alternateRows( table,startWithBlank ){

                       var rows = table.getElementsByTagName('TR'),
                              cnt = 0,
                              currentRow,
                              even = typeof startWithBlank === 'boolean' ? !startWithBlank : true;
                                 
                       for (cnt = 0; cnt < rows.length; cnt += 1) {
                                  currentRow = rows[cnt];
                                  even = even ? false : true;
                                  if (even) {
                                               currentRow.className = 'alt';
                                  }
                       }          
             }
          
           alternateRows(document.getElementById('employees'), true);



Какво представлява функцията “alternateRows”?

Функцията alternateRows обработва редовете на таблицата като ги оцветява през ред.
Функцията приема два параметъра table и startWithBlank. Параметърът table е таблицата, съдържаща редовете, които трябва да оцветим. startWithBlank използваме за да «кажем» на функцията дали таблицата да започва с оцветен ред или не.

                       var rows = table.getElementsByTagName('TR'),

Тук взимаме всички редове на таблицата, които по късно ще обходим.
          
                       even = typeof startWithBlank === 'boolean' ? !startWithBlank : true;

Използваме променливата even за да зададем дали да „оцветява реда” (тоест реда ще се оцвети ако променливата е true). Параметъра startWithBlank използваме за да зададем на функцията как да третира първия ред - да го оцвети или не.( ако startWithBlank е true то тогава не се оцветява първия ред).


                       for (cnt = 0; cnt < rows.length; cnt += 1) {
                                  currentRow = rows[cnt];
                                  even = even ? false : true;
                                  if (even) {
                                               currentRow.className = 'alt';
                                  }
                       }          
След което обхождаме всички редове, присвояваме текущия ред на променливата currentRow, сменяме флага even - ако е true присвояваме му стойност false и обратното. След което проверяваме дали even е true , ако е true присвояваме на текущия ред css класа, който оцветява реда (background-color:rgb(227,240,248);).

Ето го и целия скрипт, готов за тестване : тук

Ако ви харесва написаното участвайте в следващите безплатни курсове на Телерик Aкадемия на тема „Web Front-End Development”.



Коментари (1)

kimvaras на 07.07 2011 в 18:17ч.
Извикването на функцията може да стане във функцията window.onload. Ето и съкратен вариант:

function alternateRows(table, startWithBlank) {
var even = startWithBlank;

for (var cnt in table.rows) {
if (even) {
table.rows[cnt].className = 'alt';
}
even = !even;
}
}

// called when all elements on the page are loaded.
window.onload = function(){
alternateRows(document.getElementById('employees'), true);
}

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com