Почему срипт js срабатывает частично?

Question

[FlexStat]

Имеется вот такой вывод для генерации таблицы с данными:

<?foreach ($arResult["PROPERTIES"] as $arProp):?>
                                                <?if(!empty($arProp["VALUE"])):?>
                                                        <table id="table1">
                                                               <tr>
                                                                <td style = "padding: 10px;" ><span><?=$arProp["NAME"]?></span> </td>
                                                                <td style = "text-align: right !important; " ><span>

                                                                        <?if(!is_array($arProp["VALUE"])):?>
                                                                                <?=$arProp["VALUE"]?>
                                                                        <?else:?>
                                                                                <?foreach($arProp["VALUE"] as $arPropItem):?>
                                                                                        <?=$arPropItem?>;
                                                                                <?endforeach?>
                                                                        <?endif?>
                                                                </span></td>
                                                              </tr>
                                                        </table>
                                                <?endif?>

и такой js:

$(document).ready(function(){
    var tr = document.getElementById('table1').getElementsByTagName('tr'),
          i = tr.length;
    while(i--) {
        tr[i].style.backgroundColor = i%2 ? ' green' : 'white';
    }
})

ситуация такая, что скрипт закрашивает только первый tr остальные не закрашивается по условию.

Сильно не пинайте.

Comments

[V Sh.]

А чему у вас равна переменная i перед циклом? Выведите ее в консоль и посмотрите. На первый взгляд ничего криминального не вижу в коде js.

Answer 1

[Владимир Проскурин]

Ну так у вас в таблице table1 только одна строка tr, поэтому цикл проходит только один элемент. И id у элементов должен быть уникален, возможно у вас куча table1. Поставьте таблицам класс .table, и перепишите вот так

$(document).ready(function(){
    var tr = document.querySelectorAll('.table tr'),
          i = tr.length;
    while(i--) {
        tr[i].style.backgroundColor = i%2 ? ' green' : 'white';
    }
})

Comments

[FlexStat]

ну так tr генерируется циклом и по итогу, после формировании страницы у нас получается n количество tr , после генерации страницы запускается скрипт, который уже закрашивает таблицу. Или я не прав ?

[t0ny_sto0rm]

Кстати, а разница между querySelector('.table tr') и querySelector('.table > tr') есть?

[Владимир Проскурин]

t0ny_sto0rm, да. В первом случае ищутся все дочерние и поддочерние - все которые внутри. А во втором случае только прямые потомки, на подуровне

Answer 2

[Mikhail Kupriyanov]

Предлагаю делать то же самое в php-шаблоне на этапе отрисовки таблицы

<?foreach ($arResult["PROPERTIES"] as $i => $arProp):?>
                                                <?if(!empty($arProp["VALUE"])):?>
                                                        <table id="table1">
                                                               <tr style="background-color:"<?= $i%2 ? 'green' : 'white' ?>">
// ...

Вместо атрибутов-style советую использовать class
Всё то же самое делается через стили

#table1 tr:nth-child(even) { background: #0f0; }
#table1 tr:nth-child(odd) { background: #fff; }

https://www.w3.org/Style/Examples/007/evenodd.en.html

Comments

[FlexStat]

хм, такой вариант почему-то не работает на выходе:

<tr style="background-color:"white">
               		<td style = "padding: 10px;" ><span>Задвижка</span> </td>
	<td style = "text-align: right !important; " ><span>
									
	</span></td>
       </tr>		</table>																				   <table class = "table1">
				<tr style="background-color:"white">
				<td style = "padding: 10px;" ><span>Основной замок</span> </td>
				<td style = "text-align: right !important; " ><span>

[Mikhail Kupriyanov]

FlexStat, я ошибся: внутри style нужны одинарные кавычки
-color:" тут
?>" и тут
Или без кавычек использовать #0f0 и #fff

[FlexStat]

Mikhail Kupriyanov, да это поправил, но все равно

<tr style="background-color: white">
								<td style = "padding: 10px;" ><span>Задвижка</span> </td>
								<td style = "text-align: right !important; " ><span>
												</span></td>
                                                              </tr>
							</table>
																		<table id = "table1">
                                                          <tr style="background-color: white">
								<td style = "padding: 10px;" ><span>Основной замок</span> </td>
								<td style = "text-align: right !important; " ><span>
														</span></td>
                                                              </tr>

выводится только background-color: white", green игнорируется

[Mikhail Kupriyanov]

Счётчик в цикле есть? $i.

Answer 3

[Stalker_RED]

js код вполне рабочий

Но можно вообще вот так:

А если нужно обязательно на js, то все делается немного проще, чем у вас:

Comments

[FlexStat]

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

[Stalker_RED]

FlexStat, подходят для любого количества.

[FlexStat]

Stalker_RED, спасибо за совет. Тогда можно уточнить, смотрите tr формируется поочередно через php в цикле, после того как страница полностью сформирована, запускается скрипт js и выполняет заполнение строк tr. Может быть некорректное размещение js скрипта и поэтому он отрабатывает только первую строку ? Может быть такое ? Хотя я его уже по разному размещал.

[Stalker_RED]

FlexStat, еще раз: у вас там всего дна строка, потому скрипт и обрабатывает одну строку, потому что она там всего одна.
Вам об этом Владимир Проскурин полтора часа назад написал.

[FlexStat]

Stalker_RED, да разобрался