У меня есть таблица, которая получает свои строки из базы данных MYSQL
<table id="table1"> <?php // Connect to database server mysql_connect("localhost", "root", "asnaeb") or die (mysql_error ()); // Select database mysql_query("SET NAMES `utf8`"); // UTF 8 support!! mysql_select_db("scores") or die(mysql_error()); // SQL query $strSQL = "SELECT * FROM latest"; // Execute the query (the recordset $rs contains the result) $rs = mysql_query($strSQL); // Loop the recordset $rs // Each row will be made into an array ($row) using mysql_fetch_array while($row = mysql_fetch_array($rs)) { // Write the value of the column FirstName (which is now in the array $row) ?> <?php echo $row['Header'].""; ?> <tr> <td id='date'><?php echo $row['Date'].""; ?></td> <td id='time'><?php echo $row['Time'].""; ?></td> <td id='hometeam'><?php echo $row['HomeTeam'].""; ?></td> <td id='score'><?php echo $row['Score'].""; ?></td> <td id='awayteam'><?php echo $row['AwayTeam'].""; ?></td> <td id='other'><?php echo $row['Other'].""; ?></td> </tr> <?php } mysql_close(); ?> </table> У меня есть 2 класса css под названием «A» и «B» для четных строк и четных строк
В настоящее время это делается путем замены <tr> на <tr class='<?php echo $row['Row'].""; ?>'> <tr class='<?php echo $row['Row'].""; ?>'> и у меня в моей таблице базы данных есть столбец «Row», который я добавляю в A или B для четной или нечетной строки … проблема в том, что я хочу удалить или добавить новую строку между одним из них, я буду иметь изменить все буквы A и B в другом.
Я видел в других вопросах много способов сделать это в javascript или jquery, но для обычной таблицы с TR, которая не является моим случаем … (попробовал некоторые из этих скриптов, но не смог ее устранить)
Так что я хочу, чтобы более простой способ сделать это Even and Odd rows, Thanks!
Вы можете легко добавить эти классы с помощью jQuery
$(function(){ $('#table1 tr:odd').addClass('A'); // for even $('#table1 tr:even').addClass('B'); });
сделайте это в стиле CSS (без встроенного класса) раз и навсегда:
в CSS :
#table1 tr:nth-child(odd) td { background-color:#ebebeb } #table1 tr:nth-child(even) td { background-color:#0000ff }
в вашем HTML :
<table id="table1">
thats it, независимо от того, удалены ли ваши строки таблицы или нет.
Почему вы не использовали modulo в своем цикле while? Это лучше, чем хранить свой класс в вашей базе данных …:
$i = 0; while($row = mysql_fetch_array($rs)) { // Write the value of the column FirstName (which is now in the array $row) ?> <?php echo $row['Header'].""; ?> <tr class="<?php echo $i%2 == 0 ? "class_A" : "class_B" ; $i++;?>" > <td id='date'><?php echo $row['Date'].""; ?></td> <td id='time'><?php echo $row['Time'].""; ?></td> <td id='hometeam'><?php echo $row['HomeTeam'].""; ?></td> <td id='score'><?php echo $row['Score'].""; ?></td> <td id='awayteam'><?php echo $row['AwayTeam'].""; ?></td> <td id='other'><?php echo $row['Other'].""; ?></td> </tr> <?php } mysql_close(); ?>
<?php $class="odd" while($row = mysql_fetch_array($rs)) { $class = ($class=='even' ? 'odd' : 'even'); ?> <tr class="<?php echo $class"> ... </tr> <?php } ?>
Есть много способов сделать это: PHP, Javascript и даже чистый CSS. Вот PHP-способ добавления класса в каждую другую строку:
while($row = mysql_fetch_blahblah()) { $i = 0; ?> <tr class="<?php echo $i % 2 == 0 ? 'class1' : 'class2';?>"> <td>....</td> </tr> <?php $i++; // increment our counter }
В основном оператор модуля возвращает оставшуюся часть деления nubmers с каждой стороны, поэтому, например, 3 % 2 == 1 , 4 % 2 == 0 , 5 % 2 == 1 , поэтому мы можем определить, является ли $i нечетным или даже и чередуйте классы, добавленные в <tr> .
IMHO вы хотите либо сделать это таким образом для 100% гарантии, что он будет работать (без зависимостей браузера), или если вы создаете приложение для современных браузеров, отправляйтесь на маршрут CSS.