Как установить 2-ю строку в другом цвете по getElementsbyClass

У меня есть следующий код:Как установить 2-ю строку в другом цвете по getElementsbyClass

<script type = "text/javascript"> 
function showColors() { 

var cells = getElementsbyClass("design"); 
for (var i = 0, len = cells.length; i < len; ++i) { 
    cells[i].style.backgroundColor = "#ddd"; 
} 

} 

if(document.getElementsByClassName) { 

getElementsByClass = function(classList, node) {  
    return (node || document).getElementsByClassName(classList); 
    }; 


</script>

<script type = "text/javascript"> 
window.onload = function() { 

showColors(); 

    } 
</script> 
table id="foo"> 
<tbody> 
    <tr class = "design"> 
     <td>One</td><td>Two</td><td>Three</td> 
    </tr> 
    <tr class = "design"> 
     <td>One</td><td>Two</td><td>Three</td> 
    </tr> 
    <tr class = "design"> 
     <td>One</td><td>Two</td><td>Three</td> 
    </tr> 
</tbody> 
</table> 
</body>

Мой вопрос: Как я могу установить каждую 2-ю строку в другом цвете по getElementsbyClass(). Как вы можете видеть, фактический код не работает :(Пожалуйста, не используйте JQuery или selectivizr. Пожалуйста, оставайтесь на примере :). Мне нужен динамический пример. Я знаю, что css будет работать !!! Это также важно: он должен работать для всех браузеров!

Большое спасибо за ответ :)

источник

2012-11-29 user1860908

Вы можете достичь этого только с помощью CSS3. Проверьте http://davidwalsh.name/css-tables-css3-alternate-row-colors –

почему бы вам не принести TBODY элемент, цикл по элементам TR и добавить изменяющиеся классы, как это:

var i 
    , current 
    , rows = document.getElementById('table-body').getElementsByTagName('tr'); 

for(i = 0; i < rows.length; i++) { 
    current = current !== 'class1' ? 'class1' : 'class2'; 
    rows[i].setAttribute('class', current); 
}

вы могли видеть рабочий пример на JS -fiddle: http://jsfiddle.net/VF3Ay/3/

источник

2012-11-29 22:26:52 hereandnow78

Это не сработало! Var current также неинициализирован !!! – user1860908

Но этот подход может быть решением для его работы во всех браузерах! – user1860908

работает и должен работать в IE8: «var i, current, ... 'там переменная инициализирована, вам нужно скопировать весь код !!! – hereandnow78

Используйте CSS:

.design:nth-child(even){ background-color:#ddd }

источник

2012-11-29 22:08:05 JCOC611

Нет CSS. Мне нужен динамический пример с классом !! – user1860908

@ user1860908: Я уверен, что это сработает независимо от того, сколько строк вы добавите. – JCOC611

Это IE9 и выше? –

Если единственное, что петля делает это изменить цвет фона просто добавьте 2 к i каждый раз, вместо того, увеличивающиеся его ++:

var cells = document.getElementsByClassName("design"); 
for (var i = 0, len = cells.length; i < len; i+=2) { 
    cells[i].style.backgroundColor = "#ddd"; 
}

Демо: http://jsfiddle.net/ytCZa/

Если цикл должен делать другие вещи для каждой строки, то просто проверить, если i делится на 2, используя оператор по модулю перед установкой цвета:

if (i % 2 === 0) 
    cells[i].style.backgroundColor = "#ddd";

Но обратите внимание, что у вас опечатка: вы видите вашу getElementsbyClass с нижним регистром «b» при вызове, но с верхним регистром «b» при его определении, что не работает, потому что JS чувствителен к регистру. Кроме того, в заявлении if отсутствовало его закрытие }.

В коде и демо выше я не использовал свой getElementsByClass функцию на все: это ничего, что getElementsByClassName не делать, не делать, и это зависит от getElementsByClassName работать, так что вам не нужно. Если вы действительно хотите это все равно по какой-то причине, вот демо, где я исправил код, чтобы сделать его работу: http://jsfiddle.net/ytCZa/1/

источник

2012-11-29 22:14:32 nnnnnn

Для ie9 и Firefox это прекрасно. Но мне пришлось определить, что он не работает с IE8 :(Есть ли указатель цвета для IE8, ссылающийся на фактический код ?! – user1860908

IE8 не имеет 'getElementsByClassName()'. Используйте 'document.querySelectorAll (". design ")' или использовать [polyfill] (https://gist.github.com/2299607), если вы хотите поддерживать даже более старый IE без изменения существующего кода. – nnnnnn

getElementsByClassName() работает на IE8 !!! I использовал его для другого использования! И я не хотел бы использовать какие-либо скрипты! Javascript должен быть единственным! Инструкция цвета .style.backgroundColor - причина, почему код не работает для IE8 – user1860908

надеюсь, что это поможет вам!

LE. Это лучше

<!DOCTYPE html> 
<html> 
<script type = "text/javascript"> 
    function showColors() { 
     var cells = document.getElementsByClassName("design"); 
     for (var i = 0, len = cells.length; i < len; ++i) { 
      if (i % 2 == 0) 
      { 
       cells[i].style.backgroundColor = "#ddd"; 
      } 
      else 
      { 
       cells[i].style.backgroundColor = "#aaa"; 
      } 
     } 
    } 
    if(document.getElementsByClassName) { 
     getElementsByClass = function(classList, node) {  
      return (node || document).getElementsByClassName(classList); 
     }; 
    }; 


window.onload = function(){ 
    showColors(); 
} 
</script> 
<body> 
    <table id="foo"> 
     <tbody> 
      <tr class = "design"> 
       <td>One</td><td>Two</td><td>Three</td> 
      </tr> 
      <tr class = "design"> 
       <td>One</td><td>Two</td><td>Three</td> 
      </tr> 
      <tr class = "design"> 
       <td>One</td><td>Two</td><td>Three</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

источник

2012-11-29 22:18:31 smotru

К сожалению, эта команда .style.backgroundColor не работает для IE8 :( – user1860908

http://my.jetscreenshot.com/demo/20121130-zxnp-44kb .. вы можете попробовать с помощью document.querySelectorAll (". Design") вместо этого .. – smotru

Как установить 2-ю строку в другом цвете по getElementsbyClass

ответ

Смежные вопросы