end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

jqueryでtableの行をreverseしたり、hide or show したり

javascript

次のように書けば、tableのtrの表示順や、表示/非表示を変更できるみたい。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style>
table { border-collapse: collapse;}
td {    border: 1px solid #000000;}
</style>
</head>
<body>

<input type="button" value="表示サイズ変更" id="hide_tv" onClick="change_size('tv')">
<input type="button" value="表示順変更" id="reverse_tv" onClick="reverse_table('tv')" >
<table id="tv">
  <tbody>
  <tr><td>1行目</td></tr>
  <tr><td>2行目</td></tr>
  <tr><td>3行目</td></tr>
  <tr><td>4行目</td></tr>
  <tr><td>5行目</td></tr>
  </tbody>
</table>
</body>
<script>
function change_size(id){
  $("#"+id+ " tr:gt(2)").toggle();
  $("#reverse_"+id).toggle();
}

function reverse_table(id){
  var new_tr_list = $("#"+id+ " tbody tr").get().reverse();
  $("#"+id+" tbody").html(new_tr_list);
}
</script>
</html>