Unwanted table data with changing with JavaScript - php

Question

I am making a table in which PHP is used in <td> tags. This contains a list of products and their prices. On the top of the table, I have inserted two buttons, one for arranging data in ascending order of price, and the other one is for descending order.
By default, the data is in ascending order. When I click on the descending order button, it works but with of the table data changes which is not required.
Here is my CSS code:
a {text-decoration:none; color:#0000FF;}
#hold .log {
color:#0000FF;
text-align:center;
font-size:20px;
}
h2 {color:#0000FF;}
#left { width:200px;border:1px;border-style:solid;margin:0 auto;margin-top:20px;text-align:center;border- color:#0000FF;float:left;}
#left div {border:1px;border-style:solid;border-color:#0000FF;}
#left div a {}
.style table {border:1px;border-style:solid;border-color:#0000FF;}
.style table tr td {border:1px;border-style:solid;border-color:#0000FF;color:#333;width:250px;}
.style table tr td input,select,textarea {width:250px;height:30px;}
Here is the code for the table:
<button onclick="as()">Ascending Order</button>
<button onclick="ds()">Descding Order</button>
<div class="style">
<table>
<tr>
<td>Title</td>
<td>Price</td>
</tr>
<th><h2 style="text-align:left;">Cameras</h2></th>
<tr>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price ASC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr id='cam_as'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
</tr>
<tr>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price DESC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr id='cam_ds' style='display:none;'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
</tr>
</table>
</div><!-- style ends-->
Finally, here is the script which is doing this all required work:
<script type="text/javascript">
function as()
{
$('#cam_as,#com_as,#cell_as').css('display','block');
$('#cam_ds,#com_ds,#cell_ds').css('display','none');
}
function ds()
{
$('#cam_ds,#com_ds,#cell_ds').css('display','block');
$('#cam_as,#com_as,#cell_as').css('display','none');
}
</script>
I have tried but I am unable to find where I am going wrong.

Answer 1

Yoo have enough problems with your code. I removed extra < tr >'s. I added classes and changed javascript functions accordingly. Your problem is mainly in nested < tr >'s
http://jsfiddle.net/Sanya_Zol/kC9Tk/
<button onclick="as()">Ascending Order</button>
<button onclick="ds()">Descding Order</button>
<div class="style">
<table>
<tr>
<td>Title</td>
<td>Price</td>
</tr>
<th><h2 style="text-align:left;">Cameras</h2></th>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price ASC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr class='cam_as'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price DESC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr class='cam_ds' style='display:none;'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
</table>
</div>
<script type="text/javascript">
function as(){
$('.cam_as,#com_as,#cell_as').show();
$('.cam_ds,#com_ds,#cell_ds').hide();
}
function ds(){
$('.cam_ds,#com_ds,#cell_ds').show();
$('.cam_as,#com_as,#cell_as').hide();
}
$(as); // run as() when document ready
</script>

Answer 2

There are <tr>Tag outside and inside the loop, you only need them one time.
The loop would also create multiple <tr> Tags with the same ID, thats not correct. Try to use jQuery-Toggle to show/hide the elements.
The last part of the question is not clear for me, sorry.