Applying different CSS to top 10 results of a query

Question

Hello,

The table below prints of the results of a query called $sqlStr3. It works fine. The query is set to return the top 25 results.

I would like to apply a unique CSS class (called "class1" for purposes of this question) to the top ten results in the query. How can I do this?

Thanks in advance,

John

$result = mysql_query($sqlStr3);
$count = 1;  
$arr = array();
echo "<table class=\"samplesrec1edit\">";
    while ($row = mysql_fetch_array($result)) { 
        echo '<tr>';
        echo '<td class="sitename1edit2a">'.$count++.'.</td>';
        echo '<td class="sitename1edit1"><a href="http://www...com/../members/index.php?profile='.$row["username"].'"&gt;'.stripslashes($row["username"]).'&lt;/a&gt;&lt;/td&gt;';
        echo '<td class="sitename1edit2">'.number_format(($row["totalScore2"])).'</td>';
        echo '</tr>';
        }
    echo "</table>";

Answer 1

... class="...<?php if ($count <= 10) { ?> class1<?php } ?>" ...

And move the increment to the end of the loop.

Answer 2

How about assigning each result from TOP10 a unique class called top_result_[n]?

while ($row = mysql_fetch_array($result)) { 
        echo '<tr'.($count++ <=10 ? ' class="top_result_'.$count.'"' : '').'>';
        echo '<td class="sitename1edit2a">'.$count.'.</td>';
        echo '<td class="sitename1edit1"><a href="http://www...com/../members/index.php?profile='.$row["username"].'"&gt;'.stripslashes($row["username"]).'&lt;/a&gt;&lt;/td&gt;';
        echo '<td class="sitename1edit2">'.number_format(($row["totalScore2"])).'</td>';
        echo '</tr>';
        }
    echo "</table>";

I'm not sure wether you want to apply ONE class for all 10 results or UNIQUE class for each from 10 results, as for the first case, the code would be:

while ($row = mysql_fetch_array($result)) { 
        echo '<tr'.($count++ <=10 ? ' class="top_result"' : '').'>';
        echo '<td class="sitename1edit2a">'.$count.'.</td>';
        echo '<td class="sitename1edit1"><a href="http://www...com/../members/index.php?profile='.$row["username"].'"&gt;'.stripslashes($row["username"]).'&lt;/a&gt;&lt;/td&gt;';
        echo '<td class="sitename1edit2">'.number_format(($row["totalScore2"])).'</td>';
        echo '</tr>';
        }
    echo "</table>";

Answer 3

use this:

$result = mysql_query($sqlStr3);
$count = 1;  
$arr = array();
echo "<table class=\"samplesrec1edit\">";
    while ($row = mysql_fetch_array($result)) { 
        if($count < 11){
            echo '<tr class="top-10">';
        }else{
            echo '<tr class="non-top-10">';
        }
            echo '<td class="sitename1edit2a">'.$count++.'.</td>';
        echo '<td class="sitename1edit1"><a href="http://www...com/../members/index.php?profile='.$row["username"].'"&gt;'.stripslashes($row["username"]).'&lt;/a&gt;&lt;/td&gt;';
        echo '<td class="sitename1edit2">'.number_format(($row["totalScore2"])).'</td>';
        echo '</tr>';
        }
echo "</table>";

access the td of top10 using this css

.top-10 td{
//definitions
}

and access the td of non top10 lines with

.non-top-10 td{
//definitions
}

Answer 4

you can do it in the server side via php like:

 echo '<tr '.($count <=10 ? 'myclass' : '').' > ;

or in jquery in front side like:

$("someTableSelector").find("tr:lt(10)").addClass('myclass')