0

<td>タグにPHPを使用したテーブルを作成しています。これには、製品とその価格のリストが含まれています。表の上に2つのボタンを挿入しました。1つは価格の昇順でデータを並べ替えるためのもので、もう1つは降順でデータを並べるためのものです。

デフォルトでは、データは昇順です。降順ボタンをクリックすると機能しますが、テーブルデータの変更は不要です。

これが私のCSSコードです：

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;}

テーブルのコードは次のとおりです。

<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-->

最後に、これが必要なすべての作業を実行するスクリプトです。

<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>

試しましたが、どこが間違っているのかわかりません。

4

2 に答える 2

0

ループの外側と内側にタグがあり<tr>、必要なのは1回だけです。ループはまた<tr>、同じIDを持つ複数のタグを作成しますが、これは正しくありません。jQuery-Toggleを使用して要素を表示/非表示にしてみてください。

質問の最後の部分は私にははっきりしていません、ごめんなさい。

于 2013-03-27T10:30:39.587 に答える
0

Yooはあなたのコードに十分な問題を抱えています。余分な<tr>を削除しました。クラスを追加し、それに応じてjavascript関数を変更しました。あなたの問題は主にネストされた<tr>にあります

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>
于 2013-03-27T10:43:28.133 に答える