2012-06-01 213 views
1

我有一个从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 class='<?php echo $row['Row'].""; ?>'>更换<tr>做,我有我的数据库表中的列“行”,我加入A或B为偶数或奇数行...问题是,如果我想删除或添加新的在其中的一个之间我将不得不改变其他所有的A和B.

我已经看到了另一个问题,很多的方式来做到这一点在JavaScript或jQuery的,但与TR的一个正常的表是不是我的情况......(试了一下这些脚本的,但不能把它固定)

所以我想要一个更简单的方法来做到偶和奇行,谢谢!

+0

使用模运算符奇数和偶数如果(NUM%2 == 0)这样做别的DO THAT – swapnesh

+0

这么多的方式来做到这一点! – Dunhamzzz

回答

6

您可以添加使用jQuery这些类很容易这样

$(function(){ 
    $('#table1 tr:odd').addClass('A'); 

// for even 

$('#table1 tr:even').addClass('B'); 

}); 
+0

这是最好的解决方案:),纯CSS解决方案我可以完成,但我有其他的CSS喜欢悬停的行和东西,当添加这些新的CSS时弄乱了......这个jQuery脚本岩石thx! – Meh

11

做在CSS方式(无内嵌类)一劳永逸:

在CSS

#table1 tr:nth-child(odd) td { background-color:#ebebeb } 
#table1 tr:nth-child(even) td { background-color:#0000ff } 

在HTML

<table id="table1"> 

多数民众赞成它,无论你的表行被删除/否。

+0

ohh我爱css3是如此强大,吓唬我! – jcho360

+0

它让我害怕,当我进入兼容性问题:) – 2012-06-01 14:18:26

+0

支持除IE浏览器6-8的所有浏览器http://caniuse.com/#search=nth-child – chaenu

1

你为什么没有在你的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(); ?> 
0

有很多方法可以做到这一点,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 
} 

基本上modulus operator返回除以nubmers任其一侧的其余部分,因此,例如3 % 2 == 14 % 2 == 05 % 2 == 1,所以我们可以告诉我们,如果$i是奇数还是偶数,并加入<tr>

恕我直言,你想要么做了100%的保证,将工作(没有浏览器的依赖),或者这样,如果你设计你的应用程序的现代浏览器去的CSS路线。

1
<?php 
$class="odd" 
while($row = mysql_fetch_array($rs)) { 
    $class = ($class=='even' ? 'odd' : 'even'); 
?> 
<tr class="<?php echo $class"> 
... 
</tr> 
<?php } ?>