Как чередовать цвета строк таблицы HTML с помощью JSP?
Оставляя здесь быструю альтернативу, используя переключатель класса на столе. Поведение очень похоже на выбор, но может быть в стиле с переходами, фильтрами и цветами, каждый из которых индивидуально.
function toggleSelect(){
if (store.classList[0] === "hidden"){
store.classList = "viewfull"
}
else {
store.classList = "hidden"
}
}#store {
overflow-y: scroll;
max-height: 110px;
max-width: 50%
}
.hidden {
display: none
}
.viewfull {
display: block
}
#store :nth-child(4) {
background-color: lime;
}
span {font-size:2rem;cursor:pointer}<span onclick="toggleSelect()">⮋</span>
<div id="store" class="hidden">
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
</div>6 ответов
Используйте атрибут varStatus в вашем теге forEach, и JSTL будет управлять для вас экземпляром javax.servlet.jsp.jstl.core.LoopTagStatus в указанном вами имени переменной.
Затем вы можете использовать троичный оператор, чтобы легко вывести соответствующее имя класса:
<c:forEach items="${element}" var="myCollection" varStatus="loopStatus">
<tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
...
</tr>
</c:forEach>
Этот праймер JSTL от IBM содержит больше информации о теге core библиотека и что она вам дает.
Я не использую JSP, поэтому не могу дать вам ответ на вашем языке, но вот что я делаю (используя псевдокод)
counter = 0
foreach (elements)
counter = counter + 1
output: <tr class="row{counter % 2}">...</tr>
Лично я называю классы "row0 "и" row1 ", который позволяет вам чередовать их с помощью простого вычисления модуля, также, если вы решите иметь строки, чередующиеся в тройках или квадрах (вместо пар), вы можете легко расширить его до row2, row3 и измените выходной код на counter % 4 и т. д.
Если вы хотите, чтобы это происходило на стороне клиента, вы можете использовать Zebra Striping с JQuery.
Это можно сделать всего несколькими строками кода, но вы должны будете включить библиотеку jquery в ваш файл.
http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy
(этот ответ относится только к стороне CSS вещей ...)
Как само собой разумеющееся, я всегда нацеливаюсь на дочерние TD так:
tr.odd td {}
tr.even td {}
Причина Дело в том, что IE фактически применяет цвет фона TR, удаляя значение, установленное в TR, и применяя его к каждому отдельному TD в пределах этого TR. Иногда у вас может быть сброс CSS или другие правила CSS, которые отменяют странный способ IE делать цвет фона TR, так что это способ убедиться, что вы этого избегаете.
Кроме того, вы можете рассмотреть возможность установки только
tr td {background-color: #EEDDEE}
и
tr.odd td {background-color: #EEEEDD}
, чтобы ваш код был немного менее подробным
Просто сделай так, и будет работать:
table tr:nth-child(odd) { background-color: #ccc; }
Я использовал троичный оператор в подобных случаях. Это будет выглядеть примерно так:
String oddEven="";
<c:forEach items="${element}" var="myCollection">
oddEven = (oddEven == "even") ? "odd" : "even";
<tr class='"'+oddEven+'"'>
<td><c:out value="${element.field}"/></td>
...
</tr>
</c:forEach>