javascriptの質問です selectで回数の範囲を選び､その選んだ行をｼｬｯﾌﾙして表示するというﾌﾟﾛｸﾞﾗﾑを作りたいと思っています｡どうすればjavascriptで回数を回数を…

javascriptの質問です
selectで回数の範囲を選び､その選んだ行をｼｬｯﾌﾙして表示するというﾌﾟﾛｸﾞﾗﾑを作りたいと思っています｡
どうすればjavascriptで回数を回数を選んで表示できるでしょうか？

<html><head><script>
function sortTable(){
var tabs = document.getElementsByTagName('TABLE');
var tab = tabs[0];
var bodies = Array.prototype.slice.apply(tab.getElementsByTagName('tr'));
for (var r = bodies.length; r > 0; r--) {
var index = Math.floor(r * Math.random());tab.appendChild(bodies[index]);
bodies.splice(index, 1);}}</script></head>
<body>回数範囲選択
<select name="kaisu1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>?
<select name="kaisu2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" value="をｼｬｯﾌﾙ表示" onclick="sortTable()">
<table>
<tr><td>回数</td><td></td></tr>
<tr><td>1</td><td>a</td></tr>
<tr><td>2</td><td>b</td></tr>
<tr><td>3</td><td>c</td></tr>
<tr><td>4</td><td>d</td></tr>
</table></body></html>

よろしくお願いします｡

もともとのｺｰﾄﾞからは大分変わってしまいますが｡

function sortTable(){
 var kaisu1 = document.getElementsByName('kaisu1')[0].value;
 var kaisu2 = document.getElementsByName('kaisu2')[0].value;
 var kaisuLength = Math.abs(kaisu1 - kaisu2)+1;
 var kaisuMin = Math.min(kaisu1, kaisu2);
 var tabs = document.getElementsByTagName('TABLE');
 var tab = tabs[0];
 var bodies = Array.prototype.slice.apply(tab.getElementsByTagName('tr'));
 var keyArr = new Array(bodies.length);
 
 for (var i = 0; i < keyArr.length; i++) keyArr[i] = i;
 for (var i = 0; i < 100; i++) {
 var swap1 = Math.floor(kaisuLength * Math.random() + kaisuMin);
 var swap2 = Math.floor(kaisuLength * Math.random() + kaisuMin);
 keyArr[swap1] = [keyArr[swap2], keyArr[swap2] = keyArr[swap1]][0];
 }
 for (var i = 0; i < bodies.length; i++) tab.appendChild(bodies[keyArr[i]]);
}

こんな感じでどうでしょう｡

<html><head><script>
function getKaisu(id) {
 var sel = document.getElementById(id);
 var index = sel.selectedIndex;
 return parseInt(sel.options[index].value);
}
function sortTable(){
 var kaisu1 = getKaisu("kaisu1");
 var kaisu2 = getKaisu("kaisu2");

 // ｼｬｯﾌﾙする意味が無い
 if (kaisu1 == kaisu2) {
 return;
 }
 // kaisu1 が小さくなるようにする
 if (kaisu1 > kaisu2) {
 var n = kaisu2;
 kaisu2 = kaisu1;
 kaisu1 = n;
 }
 var tabs = document.getElementsByTagName('TABLE');
 var tab = tabs[0];
 for (var i = 0 ; i < 100 ; ++i) {
 var index = kaisu1 + Math.floor((kaisu2 - kaisu1 + 1) * Math.random());
 var trs = document.getElementsByTagName('tr');
 var tr = trs[index];
 tr.parentNode.insertBefore(tr, trs[kaisu1]);
 }
}
</script>
</head>
<body>回数範囲選択
<select id="kaisu1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>?
<select id="kaisu2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" value="をｼｬｯﾌﾙ表示" onclick="sortTable()">
<table>
<tr><td>回数</td><td></td></tr>
<tr><td>1</td><td>a</td></tr>
<tr><td>2</td><td>b</td></tr>
<tr><td>3</td><td>c</td></tr>
<tr><td>4</td><td>d</td></tr>
</table></body></html>

ｽｸﾘﾌﾟﾄの部分に､それなりに手を入れました｡
HTML の部分は､<select> の name 属性を､id 属性に変えてます｡
回数1と回数2の大きさは､どちらが大きくても動作するようにしてます｡

jsFiddle で試したのが､こちらです｡
http://jsfiddle.net/a_kuma3/Q9BMX/

動作が分かりやすいように､回答で書いたｺｰﾄﾞと以下の点が違っています｡

選択肢の数を9に増やしました
ｼｬｯﾌﾙで移動した行の背景に色を付けました

質問の意図を取り違えていましたので､あらためての回答です｡
回数範囲に関係なく､全ｼｬｯﾌﾙした後に､回数範囲以外の行を display: none しています｡

<html><head><script>
function sortTable(){
 var tabs = document.getElementsByTagName('TABLE');
 var tab = tabs[0];
 var bodies = Array.prototype.slice.apply(tab.getElementsByTagName('tr'));
 for (var r = bodies.length; r > 0; r--) {
 var index = Math.floor((r - 1) * Math.random()) + 1; // こうしないと､先頭行も対象になってしまいます
 tab.appendChild(bodies[index]);
// bodies.splice(index, 1); この処理は必要ないです
 }
 /* ここまでは､ほとんど同じです */


 var kaisu1 = document.getElementsByName('kaisu1')[0].value;
 var kaisu2 = document.getElementsByName('kaisu2')[0].value;
 if (kaisu1 > kaisu2) {
 var n = kaisu2;
 kaisu2 = kaisu1;
 kaisu1 = n;
 }
 var bodies = Array.prototype.slice.apply(tab.getElementsByTagName('tr'));
 for (var i = 1 ; i < bodies.length ; ++i) {
 var kaisu = parseInt(bodies[i].firstChild.innerHTML);
 if (kaisu < kaisu1 || kaisu2 < kaisu) {
 bodies[i].style.display = "none";
 }
 }

}</script></head>
<body>回数範囲選択
<select name="kaisu1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>?
<select name="kaisu2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" value="をｼｬｯﾌﾙ表示" onclick="sortTable()">
<table>
<tr><td>回数</td><td></td></tr>
<tr><td>1</td><td>a</td></tr>
<tr><td>2</td><td>b</td></tr>
<tr><td>3</td><td>c</td></tr>
<tr><td>4</td><td>d</td></tr>
</table></body></html>

質問のままのｺｰﾄﾞだと､先頭行までｼｬｯﾌﾙの対象になってしまうので､少しだけ変更しています｡

jsFiddle で確認したのが､こちらになります｡
http://jsfiddle.net/a_kuma3/sWNdx/