Jump to content
  • 0

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


Ксеня
 Share

Question

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

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

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

Link to comment
Share on other sites

Recommended Posts

  • 0

юзайте...

<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>

Link to comment
Share on other sites

  • 0

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

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);
}
}

Link to comment
Share on other sites

  • 0

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

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 by @LEXXX_NF
Link to comment
Share on other sites

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

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>

Link to comment
Share on other sites

  • 0
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 - крайне редко, не сичтаю эту особенность работы скрипта критичной :)

Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

Вариант 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");

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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 by Nekromancer
Link to comment
Share on other sites

  • 0

Я скажу: А как красиво можно это сделать с помощзью 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";
}

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

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

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

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

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

Edited by s0rr0w
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