Как сделать из таблицы зебру

Ксеня · July 2, 2007

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

Возможно ли это сделать с помощью HTML, если таблица является шаблоном и нет возможности для каждого тэга tr писать параметр фона.

Заранее спасибо, ЖДу сообщений

Дядя Саша · July 2, 2007

Скриптом посмотреть все строки таблицы в цикле и задать цвет.

К стати зебра не так выглядит на самом деле, я видел

Vlad · July 2, 2007

Для каждого тега TR пропиши свой класс и меняй его параметры через стили.

Fed · July 2, 2007

ну можно скриптом на пхп,гораздо проще.

Maslakoff · July 2, 2007

юзайте...

<body>

<style>

tr.bg1 td { background-color:Silver; }
tr.bg2 td { background-color:Gray; }

</style>

<table border=1 id="table_1">
<tr>
 <td>1</td><td>2</td>
</tr>
<tr>
 <td>3</td><td>4</td>
</tr>
<tr>
 <td>5</td><td>6</td>
</tr>
</table>



<script>

function doZebra( table_id )
{

 var table = document.getElementById( table_id );

 f = 0;

 for( var i=0; i < table.rows.length; i++ )
 {
 table.rows[i].className = ( f ? 'bg1' : 'bg2' );

 f = ( f ? 0 : 1 );
 }

}

doZebra('table_1');

</script>

</body>

YETI · July 2, 2007

Код понравился.

yopopt · April 30, 2008

Немножко упростил скрипт Maslakoff:

<script type="text/javascript">
function doZebra( table_id )
{
	var table = document.getElementById( table_id );

	for( var i=0; i < table.rows.length; i++ )
		table.rows[i].className = i&1 ? 'bg1' : 'bg2';
}
doZebra('table_1');
</script>

Vlad · April 30, 2008

Лучше стало - нагляднее и короче.

Emm · April 30, 2008

а я то думаю, откуда я этот код заюзал)), спасибо

Tokolist · May 1, 2008

продолжаем совершенствовать

function zebraTable(table, oddRowClass, evenRowClass) {
  for(var i = 0; i < table.rows.length; i++) {
	table.rows[i].className += (table.rows[i].className != '' ? ' ' : '') + (i&1 ? evenRowClass : oddRowClass);
  }
}

function zebraTableByClass(tableClass, oddRowClass, evenRowClass) {
  var re = RegExp('(^|s)' + tableClass + '(s|$)');
  var tables = document.getElementsByTagName('table');

  for(var i = 0; i < tables.length; i++) {
	if (re.test(tables[i].className)) {
	  zebraTable(tables[i], oddRowClass, evenRowClass);
	}
  }
}

function zebraTableById(tableId, oddRowClass, evenRowClass) {
  var table = document.getElementById(tableId);
  if (table) {
	zebraTable(table, oddRowClass, evenRowClass);
  }
}

Boris.d · April 9, 2009

Немножко упростил скрипт Maslakoff:

<script type="text/javascript">
function doZebra( table_id )
{
	var table = document.getElementById( table_id );

	for( var i=0; i < table.rows.length; i++ )
		table.rows[i].className = i&1 ? 'bg1' : 'bg2';
}
doZebra('table_1');
</script>

+200 Молодец!! Спасибо!

@LEXXX_NF · May 14, 2009

Я позволил себе малость доработать функцию.

function zebraze(tableClass, oddClass, evenClass){
  if(typeof(oddClass) == "undefined") oddClass = 'o';
  if(typeof(evenClass) == "undefined") evenClass = 'e';

  var els = document.getElementsByTagName('table');
  var pattern = new RegExp("(^|\\s)"+tableClass+"(\\s|$)");

  for(var i = 0; i < els.length; i++)
	if(pattern.test(els[i].className))
	  for(var j = 0; j < els[i].rows.length; j++ )
		els[i].rows[j].className += ' ' + (j&1 ? oddClass : evenClass);
}

Изменения:

функция принимает класс таблиц, а не ID. То есть теперь можно озебрить несколько таблиц на странице.
функция не меняет существующие классы строк, а дописывает к ним новые.
при вызове классы для четных и нечетных строк можно не указывать. По-умолчанию это 'e' и 'o';

Лично мне так удобнее.

Edited May 14, 2009 by @LEXXX_NF

s0rr0w · May 14, 2009

Я позволил себе малость доработать функцию.

for(var j = 0; j < els.rows.length; j++ )

заменить на

for(var j = 0, l=els.rows.length; j < l; j++ )

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

И как будет отзебрована вот эта таблица?

<table>
 <thead>
   <tr>
	 <th>Header 1</th>
   </tr>
 </thead>
 <tfoot>
   <tr>
	 <th>Header 1</th>
   </tr>
 </tfoot>
 <tbody>
   <tr>
	 <th>Subheader 1</th>
   </tr>
   <tr>
	 <td>Data 1</td>
   </tr>
 </tbody>
</table>

@LEXXX_NF · May 14, 2009

for(var j = 0; j < els.rows.length; j++ )
заменить на
for(var j = 0, l=els.rows.length; j < l; j++ )
На каждой итерации не будет высчитываться длинна массива.

А кто сказал, что длина массива вычисляется на каждой итерации? Судя по синтаксису здесь идёт обращение к свойству объекта, что не многим медленнее обращения к переменной - и никаких вычислений. А вообще, вряд ли кто-то сможет точно сказать, что происходит в браузере при таком вызове, особенно, учитывая количество реализаций JavaScript'a.

И как будет отзебрована вот эта таблица?

Зависит от браузера, а точнее от того, в каком порядке он выстроит в DOM'е строки. Поскольку мне ни разу не приходилось пользоваться такой приблудой как thead или tbody, а tfoot - крайне редко, не сичтаю эту особенность работы скрипта критичной

rash · May 14, 2009

А вообще, вряд ли кто-то сможет точно сказать, что происходит в браузере при таком вызове, особенно, учитывая количество реализаций JavaScript'a.

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

s0rr0w · May 14, 2009

А кто сказал, что длина массива вычисляется на каждой итерации? Судя по синтаксису здесь идёт обращение к свойству объекта, что не многим медленнее обращения к переменной - и никаких вычислений. А вообще, вряд ли кто-то сможет точно сказать, что происходит в браузере при таком вызове, особенно, учитывая количество реализаций JavaScript'a.

Да, свойство берется напрямую из объекта. Но алгоритм доступа к свойству объекта немного длиннее чем алгоримт доступа к значению переменной.

Aliance · May 15, 2009

Вариант 1. Стандартный. Чистый JavaScript, 7 строчек

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)odd(s|$)/.test( rows[i].className ) )
	  rows[i].className += " odd";
}

Вариант 2. Продвинутый. jQuery. 1 строчка:

$("tr:nth-child(odd)").addClass("odd");

s0rr0w · May 15, 2009

Вариант 2. Продвинутый. jQuery. 1 строчка:
$("tr:nth-child(odd)").addClass("odd");

И 60 килобайтный довесок, к этой одной строчке!

Эта одна строчка сможет правильно прозебровать таблицу, которую я привел выше?

e1f · May 15, 2009

$("tbody tr:nth-child(odd)").addClass("odd");

Так сможет

@LEXXX_NF · May 15, 2009

Не могу согласиться, что этот вариант зазебрит таблицу правильно. Хотя конечно все зависит от того, что считать правильным. Я считаю, что зебриться должно не только тело таблицы, но и шапка с подвалом. А чтобы так сделать, их придётся зебрить по отдельности, как в примере про tbody. Только для tbody придется отслеживать количество строк в thead - ну, чтобы правильно продолжить полосовать, аналогично для tfoot. Короче, овчинка выделки не стоит ИМХО.

Nekromancer · May 18, 2009

Извините меня пожалуйста, ещё разок.

var zEbra = document.getElementById('zEbra');
var zEbraLine = zEbra.getElementsByTagName('tr');
var tHead = /thead/i;
var tBody = /tbody/i;
var tFoot = /tfoot/i;
var testH;
var testB;
var testF;
function identZubra(){
 for (var i = 0, len = zEbraLine.length; i < len; i+=2) {
testH = tHead.test(zEbraLine[i].parentNode.nodeName)?zEbraLine[i].parentNode.parentNode:zEbraLine[i].parentNode;
testB = tBody.test(zEbraLine[i].parentNode.nodeName)?zEbraLine[i].parentNode.parentNode:zEbraLine[i].parentNode;
testF = tFoot.test(zEbraLine[i].parentNode.nodeName)?zEbraLine[i].parentNode.parentNode:zEbraLine[i].parentNode;
if(testH||testB||testF==zEbra){
zEbraLine[i].setAttribute('class','zEbraLine');
}
 }
}

var zEbra = document.getElementsByTagName('table');
var zEbraLine;
var tHead = /thead/i;
var tBody = /tbody/i;
var tFoot = /tfoot/i;
var testH;
var testB;
var testF;

function identZubra(){
 for (var i = 0, len = zEbra.length; i < len; i++) {
 zEbraLine = zEbra[i].getElementsByTagName('tr');
 for (var z = 0, len2 = zEbraLine.length; z < len2; z+=2) {
testH = tHead.test(zEbraLine[z].parentNode.nodeName)?zEbraLine[z].parentNode.parentNode:zEbraLine[z].parentNode;
testB = tBody.test(zEbraLine[z].parentNode.nodeName)?zEbraLine[z].parentNode.parentNode:zEbraLine[z].parentNode;
testF = tFoot.test(zEbraLine[z].parentNode.nodeName)?zEbraLine[z].parentNode.parentNode:zEbraLine[z].parentNode;
if(testH||testB||testF==zEbra[i]){
zEbraLine[z].setAttribute('class','zEbraLine');
}
 }
}
}

Edited May 18, 2009 by Nekromancer

Nekromancer · May 18, 2009

И что, никто не скажет "Вот это плохо!", "Вот это не работает!", "А так оно не сможет.."?

Павел Билькис · May 18, 2009

Я скажу: А как красиво можно это сделать с помощзью jQuery!

$("tr:nth-child(odd)").addClass("zebra");

А вот как я бы сдлела на чистом js

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)zebra(s|$)/.test( rows[i].className ) )
	  rows[i].className += " zebra";
}

s0rr0w · May 18, 2009

И что, никто не скажет "Вот это плохо!", "Вот это не работает!", "А так оно не сможет.."?

Плохо то, что ты пользуешь регексп для определения парента.

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

Nekromancer · May 18, 2009

а если я вложу 3 таблицы друг в друга, вы уверены что оно отфильтруется верно?

Плохо то, что ты пользуешь регексп для определения парента.

это только для того.. что тот кто пользуется скриптом может писать код и на HTML и на XHTML.. а как известно, там регистр разный.

s0rr0w · May 18, 2009

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

А перед сравнением ну никак нельзя привести все к одному регистру? :blink:

Первый вопрос кому адресован?

Edited May 18, 2009 by s0rr0w

Sign In

Как сделать из таблицы зебру

Question

Link to comment

Share on other sites

43 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information