yangkai9999 Posted November 16, 2009 Share Posted November 16, 2009 Hello,I got a sample CSS file like this:a img { border: 0;}table.sortable { border-spacing: 0; border: 1px solid #000; border-collapse: collapse;}table.sortable th, table.sortable td { text-align: left; padding: 2px 4px 2px 4px; border-style: solid; border-color: #444;}table.sortable th { border-width: 1px 1px 1px 1px; background-color: #ccc;}table.sortable td { border-width: 1px 1px 0px 1px;}table.sortable tr.odd td { background-color: #ddd;}table.sortable tr.even td { background-color: #fff;}The code seems it can give the difference color for ODD or EVEN row from output.I try to set the code avariable by add a <link rel="stylesheet" type="text/css" href="example.css"/> between <head> and </head> tag.The border parts worked. but the background-color wasn't. Can anyone can tell me how to make the color working?Thank you, Link to comment Share on other sites More sharing options...
justsomeguy Posted November 16, 2009 Share Posted November 16, 2009 background-color is the correct property, so those rules will change the background color of any td element inside of a tr with the certain class on it, inside of a table with the sortable class. Link to comment Share on other sites More sharing options...
yangkai9999 Posted November 16, 2009 Author Share Posted November 16, 2009 background-color is the correct property, so those rules will change the background color of any td element inside of a tr with the certain class on it, inside of a table with the sortable class.But it doestion work at the following PHP+HTML code. Should I change some of my code?echo " <table class='sortable' id='mybrowse' align=center height=69 > <tr><th width=100><font face=arial size=2/><div align=center><strong>Patient ID</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Name</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Education</strong></div></font></th> <th width=248><font face=arial size=2/><div align=center><strong>Address</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Family number</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Test order</strong></div></font></th> </tr>"; while ($row= mysql_fetch_array($result)){ //loop until all records from the table are selected echo "<tr>"; echo "<td><font face=arial size=2/>". $row[ 'P_ID' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'v1' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V2' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V3' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V4' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V5' ] ."</font></td>"; echo "</tr>";}echo "</table>"; Link to comment Share on other sites More sharing options...
jeffman Posted November 16, 2009 Share Posted November 16, 2009 Where do you assign the class name to the <tr> elements? Link to comment Share on other sites More sharing options...
yangkai9999 Posted November 16, 2009 Author Share Posted November 16, 2009 Where do you assign the class name to the <tr> elements?I assigned the class name like this:echo " <table class='sortable' id='mybrowse' align=center height=50 > <tr class='sortable' ><th width=100><font face=arial size=2/><div align=center><strong>Patient ID</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Name</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Education</strong></div></font></th> <th width=248><font face=arial size=2/><div align=center><strong>Address</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Family number</strong></div></font></th> <th width=100><font face=arial size=2/><div align=center><strong>Test order</strong></div></font></th> </tr>"; while ($row= mysql_fetch_array($result)){ //loop until all records from the table are selected echo "<tr class='sortable' >"; echo "<td><font face=arial size=2/>". $row[ 'P_ID' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'v1' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V2' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V3' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V4' ] ."</font></td>"; echo "<td><font face=arial size=2/>". $row[ 'V5' ] ."</font></td>"; echo "</tr>";}echo "</table>"; But it still doesn't work. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 16, 2009 Share Posted November 16, 2009 Where do you assign the class name to the <tr> elements?The Javascript is supposed to do that.But it still doesn't work.Use Firebug to inspect the rows in the table to make sure they actually have the class names. In Firebug, you can click the Inspect icon and then click on any element on the page and it will show you the code for that element, make sure the tr elements actually have the correct class names. Link to comment Share on other sites More sharing options...
yangkai9999 Posted November 16, 2009 Author Share Posted November 16, 2009 The Javascript is supposed to do that.Use Firebug to inspect the rows in the table to make sure they actually have the class names. In Firebug, you can click the Inspect icon and then click on any element on the page and it will show you the code for that element, make sure the tr elements actually have the correct class names.The all of tr elements are actually at the same class: 'sortable' Link to comment Share on other sites More sharing options...
justsomeguy Posted November 16, 2009 Share Posted November 16, 2009 Remove the sortable class from the tr elements, only the table should have that. Link to comment Share on other sites More sharing options...
jeffman Posted November 16, 2009 Share Posted November 16, 2009 They need to look like 'odd' or 'even'. That's why I asked how you were assigning the classnames. You need a way to know if the row is odd or even, and then to write the correct class name. That means you'll need a counter in your loop and a way to test it. Here's the abbreviated version of one technique:$i++;$class = $i % 2 ? 'odd' : 'even';echo "<tr class='$class' >"; Link to comment Share on other sites More sharing options...
justsomeguy Posted November 17, 2009 Share Posted November 17, 2009 The Javascript script is doing the actual sorting, so the rows might appear in an order other than what they are printed in PHP. The Javascript should assign the odd or even class name after it does the reorder. This is the script in question:http://yoast.com/articles/sortable-table/ Link to comment Share on other sites More sharing options...
jeffman Posted November 17, 2009 Share Posted November 17, 2009 I guess I missed the post where that was explained ? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.