Как изменить цвет фона строки таблицы поочередно? С pra поддержка старых браузеров
Моя таблица создается с помощью цикла в PHP. Я делаю это в PHP, даже если добавить условие, или есть способ лучше?
if ($nomSenha == 'xxxxxxxx') {
echo '<table class="pesquisaClientes">';
echo '<tr>';
echo '<td class="id">Id</td>
<td class="nome">Nome</td>
<td class="endereco">Endereço</td>
<td class="bairro">Bairro</td>
<td class="numero">Número</td>
<td class="complemento">Complemento</td>
<td class="telefone">Telefone</td>
<td class="email">Email</td>
<td class="data">Data</td>
<td class="editar">Editar</td>';
echo '</tr>';
$i = 0;
while ($clientes = mysql_fetch_array($selecionarClientes, MYSQL_NUM)) {
$i += 1;
echo '<tr id="cliente'.$i.'">';
echo '<td class="id">'.iconv('ISO-8859-1','UTF-8',$i).'</td>
<td class="nome">'.iconv('ISO-8859-1','UTF-8',$clientes[2]).'</td>
<td class="endereco">'.iconv('ISO-8859-1','UTF-8',$clientes[1]).'</td>
<td class="bairro">'.iconv('ISO-8859-1','UTF-8',$clientes[3]).'</td>
<td class="numero">'.iconv('ISO-8859-1','UTF-8',$clientes[4]).'</td>
<td class="complemento">'.iconv('ISO-8859-1','UTF-8',$clientes[5]).'</td>
<td class="telefone">'.iconv('ISO-8859-1','UTF-8',$clientes[6]).'</td>
<td class="email">'.iconv('ISO-8859-1','UTF-8',$clientes[7]).'</td>
<td class="data">'.iconv('ISO-8859-1','UTF-8',$clientes[8]).'</td>
<td class="editar"> Editar </td>';
echo '</tr>';
}
6 answers
Решение может быть просто с использованием CSS:
tr:nth-child(even) td {
border-bottom: 3px solid red;
}
tr:nth-child(odd) td {
border-bottom: 3px solid green;
}
Например
ПРИМЕЧАНИЕ: это свойства CSS3 и не работают в старых браузерах.
Поместите "if" троичной в коде, чтобы знать, если ваш счетчик $i нечетно, или пара, в зависимости от того, что он печатает класс css, который определяет, что будет иметь различный фон:
echo $i % 2 === 0 ? 'sua_classe_cor_diferente' : '';
Лечить только в CSS, а также является эффективным, но не работает во всех браузерах, к сожалению...
Нашел способ, чтобы jQuery, который мне был бы более уместным вопрос, почему PHP:
$( "tr:even" ).css( "background-color", "#bbf" );
$( "tr:odd" ).css( "background-color", "#fff" );
Вы можете использовать CSS:
/* linhas ímpares */
table tr:nth-child(odd) td {
background-color: #fff;
}
/* linhas pares */
table tr:nth-child(even) td {
background-color: #ccc;
}
Тем не менее, пользователь должен использовать как минимум следующие версии браузеров:
- Chrome 1.0
- Firefox 3.5
- Internet Explorer 9.0
- Opera 9.5
- Safari 3.1
И это не работает в IE 8 и более ранних версий.
Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Не нужно использовать код, чтобы сделать это в PHP или Javascript, только CSS.
Пример:
.tabela tr:nth-child(even) {background: #CCC}
.tabela tr:nth-child(odd) {background: #FFF}
, То просто добавьте class - tabela в ее столовую:
<table id="pesquisaClientes" class="tabela">
Однако, это не будет работать в версиях, более ранних, чем Internet Explorer 8. Если вам нужно сохранить совместимость, используйте jQuery. Пример:
$(document).ready(function()
{
$(".tabela tr:even").css("background-color", "#CCC");
$(".tabela tr:odd").css("background-color", "#FFF");
});
Для старых браузеров, только через javascript/jquery, но если таблица изменяется динамически, добавляя или удаляя строки, вы должны использовать событие, чтобы обновить его всегда:
$('.tabela').bind("DOMSubtreeModified",function(){
$("tr:even").css("background-color", "#bbf");
$("tr:odd").css("background-color", "#fff");
});