Форум

-=1100=- · #1 (**permalink**) 28.06.2012, 12:28

Написал небольшую функцию для подсветки строк в таблице.

function colortab(){
 // беру таблицы с классом "price_table"
 var tab = document.getElementsByClassName('price_table');
 x=1;
 for(var i=0; i<=tab.length-1; i++){
  // перебираю tr 
   var tr = tab[i].getElementsByTagName('tr');
   for (var k=0; k<=tr.length-1; k++){
       // через один подкрашиваю  td
       if(x==1){
          colors='url("pix_black5.png");';
          x=0
       }else{
          colors='url("';
          x=1
       }
       var td = tr[k].getElementsByTagName('td');
       for(var m=0; m<=td.length-1; m++){
            td[m].style.background=colors
      }
   }     
 }               

}

Код вроде работает но как мне кажется написан очень коряво.
Как сделать данную функцию более "красивой"?

Octane · #2 (**permalink**) 28.06.2012, 12:58

Это можно сделать с помощью CSS

Aetae · #3 (**permalink**) 28.06.2012, 13:14

Кстати да, если вы ориентируетесь на браузеры что умеют .getElementsByClassName, то оные умеют и :nth-child() .

ksa · #4 (**permalink**) 28.06.2012, 14:31

Сообщение от -=1100=-

Как сделать данную функцию более "красивой"?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function colortab() {
	var colors;
	// беру таблицы с классом "price_table"
	var tab = document.getElementsByTagName('table');
	x=1;
	for(var i=0; i<tab.length; i++){
		// перебираю tr 
		var tr = tab[i].getElementsByTagName('tr');
		for (var k=0; k<tr.length; k++){
			// через один подкрашиваю  td
			colors=(k%2==1)? 'red': 'yellow';
			var td = tr[k].getElementsByTagName('td');
			for(var m=0; m<td.length; m++){
				td[m].style.background=colors
			}
		}
	}     
}               

</script>
</head>
<body onload='colortab()'>
<table>
	<tr>
		<td>1</td>
	</tr>
	<tr>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
	</tr>
</table>
</body>
</html>

Bandicoot · #5 (**permalink**) 28.06.2012, 14:40

ksa,
маленькие поправки в вашем варианте кода: переменные x и val не используются, а colors неявно объявлена как глобальная переменная

ksa · #6 (**permalink**) 28.06.2012, 15:39

Сообщение от Bandicoot

переменные x и val не используются, а colors неявно объявлена как глобальная переменная

Часть я уже успел подправить в выложеном выше коде...

Т.ч. там остался только x...

Эту строчку так же можно удалить...

Aetae · #7 (**permalink**) 28.06.2012, 17:33

Если уж на то пошло:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function() {
    var tab = document.getElementsByTagName('table'), i = tab.length;
    while(i--){
        var tr = tab[i].getElementsByTagName('tr'), j = tr.length;
        while(j--) tr[j].style.background = j%2 ? 'red' : 'yellow'; //а на хрена козе баян?
   }    
}              
</script>
</head>
<body>
<table>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
</table>
</body>
</html>

ksa · #8 (**permalink**) 28.06.2012, 18:20

Сообщение от Aetae

Если уж на то пошло

oneguy · #9 (**permalink**) 28.06.2012, 18:24

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

<style type="text/css">
.odd {
  background-color: yellow;
}
.even {
  background-color: red;
}
</style>

function colortab(){
  // беру таблицы с классом "price_table"
  var tab = document.getElementsByClassName('price_table');
  var x=true;
  for(var i=0; i<=tab.length-1; i++){
    // перебираю tr
    var tr = tab[i].getElementsByTagName('tr');
    for (var k=0; k<=tr.length-1; k++){
      tr[k].className=x?"odd":"even";
      x=!x;        
    }
  }
}

Форум

Справочник

Discord чат

Курсы javascript