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

Ксеня · July 2, 2007

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

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

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

Nekromancer · May 18, 2009

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

эм..ну.. наверно можно..

Первый вопрос для Павел Билькис.

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

а в чём разница?

s0rr0w · May 18, 2009

а в чём разница?

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

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

Скрипт получается простым до ужаса, и эффективным при любых вложениях и сложностях.

Nekromancer · May 18, 2009

В принципе да, это просто :blink: .

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

s0rr0w · May 18, 2009

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

И напоретесь на постоянное переписывание своего скрипта. Потому что требования не бывают одинаковыми.

rgl · June 10, 2010

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

for(var j = els.rows.length-1; j >= 0; j-- )

stars · June 10, 2010

Я вот в jquery недавно ударился там эту зебру можно сделать одной строчкой ))

$(function() { $("table tr:nth-child(even)").addClass("striped"); });

хотя реально намного проще это через пхп

sigma77 · June 10, 2010

stars,

Можно чуть проще

$("table tr:nth-child(even)")

аналогично

$("table tr:even")

psywalker · June 10, 2010

Ну и я тогда 5 копеек свои подкину. От меня ещё два варианта на чистом ЖС.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	table { margin: 20px; border-collapse: collapse; width: 300px;}
	td { border: 1px solid #000;}
</style>
</head>

<body>
<table id="table">

	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>	
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>	
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>	
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>	
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>	
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>	
	</tr>
</table>
<script type="text/javascript">
	var table = document.getElementsByTagName('table')[0]
	var child = table.childNodes

	for(var i=0;i<child.length;i++)
	{
		if(child[i].nodeType==1)
		{
			var tr = child[i].childNodes
			for(var k = 0;k<tr.length;k++)
			{
				if(tr[k].nodeType==1)
				{
					var td = tr[k].getElementsByTagName('td')
					for(var j = 0;j<td.length;j++)
					{
						if(j%2==0)
						{
							td[j].style.background = 'red'
						}		
					}
				}
			}
		}
	}
	/*
	var tr = table.getElementsByTagName('tr')
	for(var i = 0;i<tr.length;i++) {
		var td = tr[i].getElementsByTagName('td')
		for(var k = 0;k<td.length;k++){
			if(k%2==0) td[k].style.background = 'red'
		}
	}
	*/


</script>
</body>
</html>

mishka · June 10, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>odd/even</title>
	<style type="text/css">
		tr.odd td{background:#ff0;}
	</style>
	<script type="text/javascript"><!--
	function initScript(){
		var _table = document.getElementsByTagName('table')
		for(var i = 0; i < _table.length; i++){
			var _tr = _table[i].getElementsByTagName('tr')
			for (var j = 0; j < _tr.length; j+=2){
				_tr[j].className += ' odd'
			}
		}
	}
	if(window.addEventListener)window.addEventListener("load",initScript,false);
	else if(window.attachEvent)window.attachEvent("onload",initScript);
	//--></script>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>head</th>
				<th>head</th>
				<th>head</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>cell</td>
				<td>cell</td>
				<td>cell</td>
			</tr>
			<tr>
				<td>cell</td>
				<td>cell</td>
				<td>cell</td>
			</tr>
			<tr>
				<td>cell</td>
				<td>cell</td>
				<td>cell</td>
			</tr>
			<tr>
				<td>cell</td>
				<td>cell</td>
				<td>cell</td>
			</tr>
		</tbody>
	</table>
	<table>
		<tr>
			<th>head</th>
			<th>head</th>
			<th>head</th>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
	</table>
</body>
</html>

Edited June 10, 2010 by mishka2

Great Rash · June 10, 2010

psywalker и mishka2, учите мат часть!

psywalker'a понесло не в ту степь :

var child = table.childNodes;

Некошерно:

var _tr = _table[i].getElementsByTagName('tr');

Кошерно:

var tr = table.rows;

for (var i = 0; i < tr.length; i++) {
	var td = tr[i].cells;

	for (var j = 0; j < td.length; j++) {
		alert(td[j]);
	}
}

Красим таблицу кошерно:

var table = document.getElementsByTagName('table')[0];
var tr = table.rows;

for (var i = 0; i < tr.length; i += 2) tr[i].style.background = '#f00';

psywalker · June 10, 2010

Погоди дружище, я чё то запутался, а приведи полный код плиз.

Кстати я вообще столбцы красил, а не строки)

mishka · June 10, 2010

Замечания принял.

Красим таблицу кошерно:
Код
var table = document.getElementsByTagName('table')[0];
var tr = table.rows;
for (var i = 0; i < tr.length; i += 2) tr.style.background = '#f00';

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

psywalker · June 11, 2010

Замечания принял.
Я обеими руками за классы

Не руками, а лапами Медведь, лапами

Great Rash · June 11, 2010

Погоди дружище, я чё то запутался, а приведи полный код плиз.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		table,
		td {
			border: #000 1px solid;
		}

		td {
			width: 50px;
			height: 50px;
		}

		.red {
			background: red;
		}

		.blue {
			background: lightblue;
		}
	</style>
</head>

<body>

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

	<script type="text/javascript">
		// красим строки
		function zebra1() {
			var table = document.getElementById('rows');
			var tr = table.rows; // массив строк

			for (var i = 0; i < tr.length; i += 2) tr[i].className = 'red';
		}

		// красим столбцы
		function zebra2() {
			var table = document.getElementById('rows');
			var tr = table.rows; // массив строк

			for (var i = 0; i < tr.length; i ++) {
				var td = tr[i].cells; // массив ячеек

				for (var j = 0; j < td.length; j += 2) td[j].className = 'blue';
			}
		}

		zebra1();
		zebra2();
	</script>

</body>
</html>

SelenIT · June 13, 2010

Некошерно:
Код
var _tr = _table.getElementsByTagName('tr');
Кошерно:
Код
var tr = table.rows;

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

Great Rash · June 15, 2010

Ну в тех тестах создается таблица, а тут осуществляется поиск по нодам уже созданной, так что они наверное мало отношения имеют к данному коду. Я точно не знаю, но по моему метод getElementsByTagName(name) осуществляет рекурсивный поиск по всему дереву нод, выбирая нужные, а в массивах rows и cells уже находятся списки нужных нод. А вообще будет время напишу тест и потестирую.

Ну и короче опять же :lol:

s0rr0w · June 15, 2010

getElementsByTagName выбирает все ноды определенного типа внутри данной ноды. rows берет ноды только данной таблицы. Соответственно, при вложенных таблицах зебровалка при помощи первого метода может работать некорректно.

SelenIT · June 15, 2010

Большое спасибо за разъяснения!

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

Join the conversation

Обсуждения

Important Information