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

qlayer трудност:

видян: 4763

Как да направим така, че редовете през ред да са различни с 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);
}

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

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

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