Jump to content
  • 0

Чередующиеся строки в таблице


Vlad
 Share

Question

Написал небольшой скрипт, который в любой таблице поочередно меняет цвет строки: светлая, темная, светлая, темная...

Посмотрите на предмет правильности описания и возможных ошибок.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Чередующиеся строки</title>
<script type="text/javascript">
zebraTable = function() {

// Получаем массив всех таблиц на странице
tables = document.getElementsByTagName("table");

// Пробегаемся по массиву таблиц
for (i = 0; i < tables.length; i++) {

// Если у таблицы стоит class="zebra", то делаем чередующиеся строки
if (tables[i].className == "zebra") {

// Получаем массив всех строк в нужной таблице
tr = document.getElementsByTagName("tr");

// Пробегаемся по всем строкам таблицы
for (j = 0; j < tr.length; j++) {

// Для нечетных строк устанавливаем class="odd"
if (j%2) tr[j].className = "odd";
}
}
}
}
window.onload = zebraTable;
</script>
<style type="text/css">
table.zebra {
width: 100%; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные линии между ячеек */
}

table.zebra td {
padding: 4px; /* Поля в ячейках */
border: 1px solid #666; /* Граница между ячеек */
}

table.zebra thead {
background: #fc0; /* Цвет фона заголовка */
}

table.zebra tbody tr {
background: #f0f0f0; /* Цвет фона четных строк */
}
table.zebra tbody tr.odd {
background: #ccc; /* Цвет фона нечетных строк */
}
</style>
</head>
<body>
<table class="zebra">
<thead>
<tr><td>Место</td><td>Оценка</td><td>Фильм</td><td>Год выпуска</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>9.1</td><td>Крестный отец</td><td>1072</td></tr>
<tr><td>2</td><td>9.1</td><td>Побег из Шоушенка</td><td>1994</td></tr>
<tr><td>3</td><td>9.0</td><td>Крестный отец 2</td><td>1974</td></tr>
<tr><td>4</td><td>8.9</td><td>Хороший, плохой, злой</td><td>1966</td></tr>
<tr><td>5</td><td>8.8</td><td>Криминальное чтиво</td><td>1994</td></tr>
<tr><td>6</td><td>8.8</td><td>Список Шиндлера</td><td>1993</td></tr>
<tr><td>7</td><td>8.8</td><td>Звездные войны: эпизод 5</td><td>1980</td></tr>
<tr><td>8</td><td>8.8</td><td>Полет над гнездом кукушки</td><td>1975</td></tr>
<tr><td>9</td><td>8.8</td><td>Касабланка</td><td>1942</td></tr>
<tr><td>10</td><td>8.8</td><td>Семь самураев</td><td>1954</td></tr>
</tbody>
</table>
</body>
</html>

Link to comment
Share on other sites

  • Answers 57
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Recommended Posts

  • 0

1.

zebraTable = function() {

имеет смысл заменить на

function zebraTable () {

Тогда функция будет доступна с момента парсинга скрипта, а не исполнения этой строчки.

2. Какая-то беда произошла, что var вымер?

3. Имеет смысл бегать по .rows.

4. В цикле если не меняется количество элементов в массиве/коллекции, лучше не провоцировать IE и определять количество итераций вне цикла. В противном случае скрипт будет бегать раза в 3-4 медленнее.

5. Имеет смысл ч?тным строкам явно вешать "even".

6. Желательно определиться, где же будут строчки раскрашены: только в tbody или во всей таблице. И поправить либо скрипт, либо CSS.

Link to comment
Share on other sites

  • 0

Тема натолкнула на мысль проверить новую (революционную) Opera 9.5b на предмет поддержки струкрурных селекторов. Сейчас, наконец-то, добрался до этой версии, и проверка принесла положительный результат. Opera 9.5b позволяет весь сценарий заменить одной строчкой:

table.zebra tbody tr:nth-child(odd) {
background:#ccc;
}

Очень мило, поскольку таким образом еще и динамически добавляемые ряды будут получать соответствующее оформление.

Link to comment
Share on other sites

  • 0
Очень мило

... теперь сделайте чудо... растворите в пространстве времен все браузеры не поддерживающие революционные идеи, и вы войдете в историю как великий маг всех времен и народов, могучий AKS CopperfielD :)

Link to comment
Share on other sites

  • 0

продолжу увлекательное обсуждение. я люблю jquery и советую всем присмотреться к нему

посмотрите примерчик

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".stripe tr").mouseover(function(){$(this).addClass("over");});
$(".stripe tr").mouseout(function(){$(this).removeClass("over");});
$(".stripe tr:even").addClass("alt");
});

</script>
<style type="text/css">
table.stripe td, table.stripe th{
padding:4px;
}
tr.alt td{background:#ecf6fc}
tr.alt th{background:#CCD4D9;border-right:1px solid #fff}
tr.over td{background:#bcd4ec}
</style>
</head>
<body>
<table class="stripe" cellspacing="0">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
<th>Phone</th>
</tr>
<tr>
<td>1</td>
<td>Lorem</td>
<td>Ipsum</td>
<td>InterF</td>
<td>8 044 254 25 25</td>
</tr>
<tr>
<td>2</td>
<td>Doloren</td>
<td>Mirty</td>
<td>Kioft</td>
<td>8 044 144 25 25</td>
</tr>
<tr>
<td>3</td>
<td>Proin</td>
<td>Curabitur </td>
<td>Biverra</td>
<td>8 044 144 25 25</td>
</tr>
<tr>
<td>4</td>
<td>Lorem</td>
<td>Ipsum</td>
<td>InterF</td>
<td>8 044 254 25 25</td>
</tr>
<tr>
<td>5</td>
<td>Doloren</td>
<td>Mirty</td>
<td>Kioft</td>
<td>8 044 144 25 25</td>
</tr>
<tr>
<td>6</td>
<td>Proin</td>
<td>Curabitur </td>
<td>Biverra</td>
<td>8 044 144 25 25</td>
</tr>
</table>
</body>
</html>

в н?м реализация подсветки строк занимает аж одну строку

$(".stripe tr:even").addClass("alt");

плюс прикольный ээфект подсветки строки по наведению курсора

Link to comment
Share on other sites

  • 0

Спокойно, все браузеры поддерживают революционные идеи. Здесь каждый сможет привести фишку, которая работает в одном браузере и не поддерживается остальными.

nth-child это, кстати, идея CSS3, так что возможно появится и в других браузерах - IE8 и FF3.

Link to comment
Share on other sites

  • 0

 $(".stripe tr").mouseover(function(){$(this).addClass("over");});
$(".stripe tr").mouseout(function(){$(this).removeClass("over");});

2strix, как небрежно. А если у меня будет 2000 строк, то вместе с этим появится 4000 обработчиков (в то время когда разумнее поставить всего два (!)). Может вы и любите jquery, но вопросы простейшей оптимизации для вас пока открыты.

Link to comment
Share on other sites

  • 0
я люблю jquery и советую всем присмотреться к нему

...

в н?м реализация подсветки строк занимает аж одну строку

"Аж одну строку" плюс 3383 строки (jquery 1.2.2)! :)

Кстати, если "присмотреться к нему" (к jquery), то можно увидеть такое (буду без устали цитировать David Mark , пока этот фрагмент не будет исправлен):

// 1102 строка в jquery 1.2.2
if ( typeof array != "array" ) // тип "array" !!!!!!!!!!!
for ( var i = 0, length = array.length; i < length; i++ )
ret.push( array[ i ] );
else
ret = array.slice( 0 );

Эта грубейшая ошибка (и многое другое) обсуждалось вот в этой теме.

Link to comment
Share on other sites

  • 0
Написал небольшой скрипт, который в любой таблице поочередно меняет цвет строки: светлая, темная, светлая, темная...

Посмотрите на предмет правильности описания и возможных ошибок.

Самое первое же, что бросается в глаза, это непосредственное присваивание и сравнение имени класса.

Что будет, если таблица будет иметь два класса? А что будет, если какая-то из строк таблицы будет тоже иметь предустановленный стиль?

Еще один момент. Некоторые строки могут иметь display: none, что в итоге будет давать ошибку черезполосицы.

Link to comment
Share on other sites

  • 0
1.Тогда функция будет доступна с момента парсинга скрипта, а не исполнения этой строчки.

Нет особой разницы. Оба варианта нормальные.

2. Какая-то беда произошла, что var вымер?

+1 за исключением определения функции, там он не обязателен.

3. Имеет смысл бегать по .rows.

Нет особого смысла. Коллекция тоже вполне работоспособна, пока не выполнится скрипт, коллекция будет считаться статичной.

Link to comment
Share on other sites

  • 0
Нет особой разницы. Оба варианта нормальные.

1. Алгоритм создания и идентификации именованной функции описан в ECMAScript Language Specification. Не пытаясь описать своими словами вариант, который Вы считаете идентичным, просто укажите раздел спецификации, описывающий этот "нормальный" вариант.

2. Известно ли Вам мнение разработчиков JavaScript 2.0 насчет подобного синтаксиса, и будет ли подобный код поддерживаться на платформах будущего?

за исключением определения функции, там он не обязателен.

Любой профессиональный программист знает о том, что переменные нужно определять явно. Прямо противоположное мнение может быть у тех, чей статус, в свою очередь, прямо противоположен "профессиональному".

Нет особого смысла. Коллекция тоже вполне работоспособна, пока не выполнится скрипт, коллекция будет считаться статичной.

Любому программисту, работающему с DOM API, хорошо известна разница между rows property и методом getElementsByTagName. Утверждение, что разницы между ними не существует, - это первый признак отсутствия компетентности.

Link to comment
Share on other sites

  • 0
1. Алгоритм создания и идентификации именованной функции описан в ECMAScript Language Specification. Не пытаясь описать своими словами вариант, который Вы считаете идентичным, просто укажите раздел спецификации, описывающий этот "нормальный" вариант.

2. Известно ли Вам мнение разработчиков JavaScript 2.0 насчет подобного синтаксиса, и будет ли подобный код поддерживаться на платформах будущего?

1. Читаем раздел 10.1.1

2. Ссылки на список разработчиков и на мнение данных разработчиков.

Любой профессиональный программист знает о том, что переменные нужно определять явно. Прямо противоположное мнение может быть у тех, чей статус, в свою очередь, прямо противоположен "профессиональному".

Окей, вопрос профессиональному разработчику, в какую chain scope попадут нижеследущие переменные

<script type="text/javascript">
var x = 1;
y = 1;
</script>

Любому программисту, работающему с DOM API, хорошо известна разница между rows property и методом getElementsByTagName. Утверждение, что разницы между ними не существует, - это первый признак отсутствия компетентности.

Чем кардинально отличается HTMLCollection интерфейс от NodeList интерфейса? Почему нужно брать именно HTMLCollection интерфейс для поиска нод внутри таблицы?

Может для начала стоит все же почитать спецификацию? :D

Link to comment
Share on other sites

  • 0
1. Читаем раздел 10.1.1

В разделе 10.1.1 есть определение типов Function objects, в нем нет описания алгоритма создания и идентификации такой функции:

zebra = function () {};. Вы или слепы, или глупы.

2. Ссылки на список разработчиков и на мнение данных разработчиков.

Ссылки???

в какую chain scope попадут нижеследущие переменные

Что такое chain scope??? В ECMAScript Language Specification нет ни одного упоминания о таком определении. Вы совершенно не понимаете то, о чем пишите!

Чем кардинально отличается HTMLCollection интерфейс от NodeList интерфейса?

Чем кардинально отличается HTMLCollection интерфейс от NodeList интерфейса? Вы "смотрите в книгу, а видите фигу"! Речь шла о разнице между rows property и методом getElementsByTagName!

Почему нужно брать именно HTMLCollection интерфейс для поиска нод внутри таблицы?

Я не собираюсь Вам ничего объяснять, т.к. мне хорошо известно, что это бесполезная трата времени!

Что ж, я ставил цель ликвидировать неоднозначность в оценке фрагмента кода. Цель достигнута. Вы в очередной раз обнаружили полную несостоятельность в вопросах, касающихся javascript. Следовательно, любому понятно, что ваши замечания следует игнорировать целиком и полностью. Более того, при ближайшем изучении вашей писанины будет ясно, что она, кроме того, что бесполезна, еще и крайне вредна для тех, кто встал на тернистый путь изучения javascript. К счастью для них, Вы тут же показали, что в этой области Вы сами являетесь дилетантом!

Link to comment
Share on other sites

  • 0
В разделе 10.1.1 есть определение типов Function objects, в нем нет описания алгоритма создания и идентификации такой функции:

zebra = function () {};. Вы или слепы, или глупы.

Смелое заявление! Но весьма опрометчивое. :)

Итак, читаем, что же написано в пункте 10.1.1 на странице 37 документа http://www.ecma-international.org/publicat...ST/Ecma-262.pdf

Program functions are defined in source text by a FunctionDeclaration or created dynamically either

by using a FunctionExpression or by using the built-in Function object as a constructor.

Теперь идем на страницу 44 и изучаем Left-Hand-Side Expressions 11.2.5 Function Expressions

Потом идем на страницу 71 и читаем, чем отличается FunctionExpression от FunctionDeclaration.

Желательно вам пояснить мне, чем же эти два варианта отличаются, так как знающим спецификации у нас являетесь вы.

Ссылки???

Если бы разработчики хотели отказаться в будущих релизах от декларации фукнций через присвоение, то скорее всего была бы пометка deprecated уже в текущем документе. Увы, но в документе я этого не обнаружил.

Что такое chain scope??? В ECMAScript Language Specification нет ни одного упоминания о таком определении. Вы совершенно не понимаете то, о чем пишите!

Ах, прошу прощения, ошибся в порядке следования слов, нужно scope chain. 10.1.4 пункт той же спецификации.

По русски это звучит как "область видимости".

Я так понял, что мой вопрос успешно проигнорирован был.

Чем кардинально отличается HTMLCollection интерфейс от NodeList интерфейса? Вы "смотрите в книгу, а видите фигу"! Речь шла о разнице между rows property и методом getElementsByTagName!

Похоже вы все же невнимательно читаете спецификации. Результатом работы метода getElementsByTagName является NodeList.

Итак, читаем, что же есть NodeList Interface

The NodeList interface provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. NodeList objects in the DOM are live.

Теперь читаем, что же есть HTMLCollection

An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes.

Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.

Так вот, rows представляет собой HTMLCollection. Не кажутся ли странными первые два предложения у обоих описаниях. Коллекцию называют списком нод, а список - коллекцией нод?

Описание значения rows

rows of type HTMLCollection, readonly

Returns a collection of all the rows in the table, including all in THEAD, TFOOT, all TBODY elements.

Я не собираюсь Вам ничего объяснять

А вам бы стоило постараться. :D Ничто не красит человека так, как адекватная аргументация в споре.

Link to comment
Share on other sites

  • 0
Ничто не красит человека так, как адекватная аргументация в споре.

Заявления об "адекватной аргументации" от человека, который ведет беседу в таком ключе:

Вопрос:

- Известно ли Вам мнение разработчиков JavaScript 2.0 насчет подобного синтаксиса, и будет ли подобный код поддерживаться на платформах будущего?

Ответ:

- Ссылки на список разработчиков и на мнение данных разработчиков.

это не более, чем вздор.

Итак, читаем, что же написано в пункте 10.1.1 на странице 37 документа...

Теперь идем на страницу 44 и изучаем Left-Hand-Side Expressions 11.2.5 Function Expressions

Потом идем на страницу 71 и читаем, чем отличается FunctionExpression от FunctionDeclaration.

Как всегда, Вы пытаетесь увести разговор в иное русло для того, чтобы скрыть отсутствие знаний. Это бесполезно, т.к. Вы уже показали то, насколько слабы ваши представления о предмете обсуждения. Более того, Вы продолжаете это демонстрировать, не понимая то, о чем идет речь. Повторю еще раз ? речь шла об определении и идентификации функций. В данном контексте все ваши блуждания по Ecma-262.pdf совершенно бесцельны.

отказаться в будущих релизах от декларации фукнций через присвоение...

Нет и не будет в ECMAScript Language Specification такого понятия, как "декларация функций через присвоение"! Это плод вашего отвлеченного воображения. Хватит писать всякую чушь!

Ах, прошу прощения, ошибся в порядке следования слов, нужно scope chain. 10.1.4 пункт той же спецификации.

Это не ошибка в порядке следования ? это полное отсутствие связи между вашим сознанием и тем, что и как происходит в ECMAScript Language.

Похоже вы все же невнимательно читаете спецификации.

А Вы не то, чтобы невнимательно читаете, Вы даже не способны понять то, о чем идет разговор! Дело не в том, что возвращает свойство или метод, дело в алгоритме работы. Но это не удивительно ? Вам об алгоритмах выполнения кода ничего не известно. Поэтому Вы, как обычно, пытаетесь "увильнуть".

Итак, читаем, что же есть NodeList Interface...

Теперь читаем, что же есть HTMLCollection

Читайте, сколько угодно ? от этого не будет никакого толку, т.к. это чтиво не имеет к моему вопросу ни малейшего отношения.

Как я уже писал ранее, беседа с вами ? это совершенно бесполезное занятие. Вы по-прежнему демонстрируете отсутствие понимания и навыков программирования на языке javascript. А поскольку я добился своей цели (см. выше), то я умываю руки.

Link to comment
Share on other sites

  • 0
Нет особой разницы. Оба варианта нормальные.

Разница есть, если воспользоваться этой функцией в том же файле, где она определяется. В варианте Влада вывов е? до фактического определения невозможен, т.к. происходит создание в момент выполнения оператора присваивания.

Проверьте:

alert([a,'===',b].join("n"));
function a () {};
var b = function () {};

Нет особого смысла. Коллекция тоже вполне работоспособна, пока не выполнится скрипт, коллекция будет считаться статичной.

Она хороша тем, что

а) сразу готова к использованию и не требует доп. вычислений в отличие от getElementsByTagName

б) туда не попадут строки из вложенных таблиц, буде такие появятся

Link to comment
Share on other sites

  • 0
Разница есть, если воспользоваться этой функцией в том же файле, где она определяется. В варианте Влада вывов е? до фактического определения невозможен, т.к. происходит создание в момент выполнения оператора присваивания.

Теоретизировать конечно хорошо, но в контексте данной задачи, особой разницы нет.

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

Она хороша тем, что

а) сразу готова к использованию и не требует доп. вычислений в отличие от getElementsByTagName

б) туда не попадут строки из вложенных таблиц, буде такие появятся

Вот, это уже больше похоже на адекватную аргументацию.

Итак, в текущем контексте, с тем вариантом таблицы, что предоставил Влад, разница будет только в скорости вычисления, и это верное замечание.

Касательно варианта "б" скажу так, если возникает задача сделать действительно универсальный скрипт раскраски, то rows может совсем не помочь

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

И вот при такой постановке задачи rows, даже при всех плюсах, минусом может оказаться сложность кода для восприятия, который будет все это обрабатывать.

Я поднял свой первый скрипт раскраски таблиц. В нем использовался вариант с rows. В последней моей задаче это не использовалось, так как не было четкой идентификации что именно эта строка может участвовать в раскрашивании. Так как строки мигрировали по траблице между разными секциями, внутри одной секции, менялся признак необходимости раскрашивания при подключении различных модулей, то сделать однозначный вариант кроме как плоской выборки строк с последующими обработками, не представлялось реальным.

Link to comment
Share on other sites

  • 0
Чем отличается FunctionDeclaration от FunctionExpression?

Покажите ваши познания ECMAScript'а smile

Вам я ничего показывать не буду - в этом нет никакого смысла. Тем более, что Вы до сих пор не вникли в суть моего вопроса. Если Вас действительно интересуют отличия FunctionDeclaration от FunctionExpression, которые не имеют к данной теме никакого отношения, то можете самостоятельно прочесть разъяснения Zeroglif по этому поводу (учиться никогда не поздно).

А смысла я не вижу (выше выделил специально), т.к. Вы не способны вести контруктивный разговор. Вы неоднократно доказали это раньше, показываете это и сейчас.

При этом Вы еще настолько невнимательны, что остается только пожимать плечами:

Итак, в текущем контексте, с тем вариантом таблицы, что предоставил Влад...

Вы действительно хорошо знакомы с "текущим контекстом", чтобы возражать WingedFox'у?

// Получаем массив всех строк в нужной таблице
tr = document.getElementsByTagName("tr");
^^^^^^^^

...

Link to comment
Share on other sites

  • 0
В разделе 10.1.1 есть определение типов Function objects, в нем нет описания алгоритма создания и идентификации такой функции:

zebra = function () {};. Вы или слепы, или глупы.

Я нашел время, заглянул в спеку, и сейчас расскажу вам, как происходит создание функции zebra = function () {};

1. Для интерпретатора эта строка - выражение. Если бы было var, то это быда бы декларация переменной.

2. Выражение является простым присваиванием Simple Assignment ( = )

3. Вычисляется LeftHandSideExpression. Это PrimaryExpression. Результатом будет ссылка на объект null, чье свойство name будет равно идентификатору.

4. Вычисляется AssignmentExpression, что будет в нашем случае FunctionExpression. Интерпретатор создаст экземпляр класса Function.

5. Вызовется GetValue от 4-го пункта

6. Присвоится значение 3му пункту результат выполнения пятого

7. Будет возвращен результат выполнения выражения.

Да, выполнение выражения будет после создания функций через FunctionDeclaration.

Я ответил на этот вопрос?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy