Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.06.2012, 12:28
Интересующийся
Отправить личное сообщение для -=1100=- Посмотреть профиль Найти все сообщения от -=1100=-
 
Регистрация: 07.09.2009
Сообщений: 26

Оптимизировать код
Написал небольшую функцию для подсветки строк в таблице.
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
      }
   }     
 }               

}


Код вроде работает но как мне кажется написан очень коряво.
Как сделать данную функцию более "красивой"?
Ответить с цитированием
  #2 (permalink)  
Старый 28.06.2012, 12:58
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Это можно сделать с помощью CSS
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2012, 13:14
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,513

Кстати да, если вы ориентируетесь на браузеры что умеют .getElementsByClassName, то оные умеют и :nth-child() .
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2012, 14:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от -=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>
Ответить с цитированием
  #5 (permalink)  
Старый 28.06.2012, 14:40
Аватар для Bandicoot
Кандидат Javascript-наук
Отправить личное сообщение для Bandicoot Посмотреть профиль Найти все сообщения от Bandicoot
 
Регистрация: 09.02.2011
Сообщений: 145

ksa,
маленькие поправки в вашем варианте кода: переменные x и val не используются, а colors неявно объявлена как глобальная переменная
Ответить с цитированием
  #6 (permalink)  
Старый 28.06.2012, 15:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от Bandicoot
переменные x и val не используются, а colors неявно объявлена как глобальная переменная
Часть я уже успел подправить в выложеном выше коде...
Т.ч. там остался только x... Эту строчку так же можно удалить...
Ответить с цитированием
  #7 (permalink)  
Старый 28.06.2012, 17:33
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,513

Если уж на то пошло:
<!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>
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 28.06.2012, 18:20
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от Aetae
Если уж на то пошло
Ответить с цитированием
  #9 (permalink)  
Старый 28.06.2012, 18:24
Профессор
Отправить личное сообщение для oneguy Посмотреть профиль Найти все сообщения от oneguy
 
Регистрация: 31.05.2012
Сообщений: 396

Мне кажется, лучше вместо того, чтобы указывать цвет в каждой строчке таблицы, создать два правила 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;        
    }
  }
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как оптимизировать код titans jQuery 5 27.04.2012 10:42
Помогите оптимизировать этот код Gamestop Общие вопросы Javascript 3 20.01.2012 14:02
Оптимизировать код adrian16 Events/DOM/Window 9 09.06.2011 16:42
Помогите код оптимизировать. Suharik Events/DOM/Window 2 27.05.2010 11:59
Помогите оптимизировать код. pizzZ jQuery 5 17.11.2009 23:52