<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>交换行（支持键盘）</TITLE></HEAD><BODY onkeydown = "javascript:return refresh();"> <style> .tr{background-color:blue} </style>
<div id=info> </div><center><script type="text/javascript"> var o1,o2;//全局记录选中的行，和要交换的行的对象 var o1a=new Array();//保存选中的行 var o2a=new Array();//保存要交换的行 var num=0;//选中的单元格所在行的索引 var numed=0;//要交换的行的索引
//同SetRow(dir)，支持键盘上下移动 function refresh() { var o; //选中的单元格 var start=false;//记录是否选中某行 //判断是否选中某行，并记录该行信息 for(var j=0;j<document.forms[0].listTd.length;j++){ if(document.forms[0].listTd[j].checked) { o=document.forms[0].listTd[j];//设置o start=true;//设置start num=document.forms[0].listTd[j].parentNode.parentNode.rowIndex;//设置num } } //得到行的集合，根据表的名称"listTable" var trs = document.getElementById("listTable").getElementsByTagName("tr"); o1=trs[num]; //设置选中的行对象 //得到每一行有多少列，cells是某行列对象的集合 var tdLen=trs[num].cells.length; o1a.length=tdLen; o2a.length=tdLen; for(var i=0;i<tdLen;i++){ o1a[i]=trs[num].cells[i].innerHTML; switch (window.event.keyCode) { case 38://上 numed=num-1; o2a[i]=trs[numed].cells[i].innerHTML; o2=trs[numed];//设置要交换的行对象 break; case 40://下 numed=num+1; o2a[i]=trs[numed].cells[i].innerHTML; o2=trs[numed];//设置要交换的行对象 break; default: break; } } switchTd(o1,o2,num); }
//交换两行 function switchTd(tr1,tr2,n){ for(x=0;x<o1a.length;x++){ tr1.cells[x].innerHTML=o2a[x]; tr1.cells[0].innerHTML=o1a[0]; tr2.cells[x].innerHTML=o1a[x]; tr2.cells[0].innerHTML=o2a[0]; tr1.cells[2].childNodes[0].name="p"+o1a[0]; tr2.cells[2].childNodes[0].name="p"+o2a[0]; } tr2.className="tr"; tr1.className=""; document.getElementById("info").innerHTML= " 当前位置： "+tr1.cells[2].childNodes[0].name+" 被替换的是： "+tr1.cells[2].childNodes[0].value+" <br> 当前位置： "+tr2.cells[2].childNodes[0].name+" 您选择的是： "+tr2.cells[2].childNodes[0].value; }
//设置选中的行，和被交换的行到数组中 function SetRow(dir){ var o; var start=false; for(var j=0;j<document.forms[0].listTd.length;j++){ if(document.forms[0].listTd[j].checked) { o=document.forms[0].listTd[j]; start=true; num=document.forms[0].listTd[j].parentNode.parentNode.rowIndex; } } var trs = document.getElementById("listTable").getElementsByTagName("tr"); o1=trs[num]; var tdLen=trs[num].cells.length; o1a.length=tdLen; o2a.length=tdLen; for(var i=0;i<tdLen;i++){ o1a[i]=trs[num].cells[i].innerHTML; if(dir=="down"){ numed = num+1; o2a[i]=trs[numed].cells[i].innerHTML; } else{ numed = num-1; o2a[i]=trs[numed].cells[i].innerHTML; } } if(dir=="down"){ numed = num+1; o2=trs[numed]; }else{ numed = num-1; o2=trs[numed]; } switchTd(o1,o2,num); }
</script> <form action=""> <table width="" border="0" cellspacing="0" cellpadding="0"> <tr> <td > <table width="100%" border="0" cellspacing="1" cellpadding="0" id="listTable" bgcolor="#D57501"> <tr align="center" bgcolor="#FFFFFF"> <td height="24">排名</td> <td width=100>选择</td> <td>您认为金牌总数的排名将是？</td> </tr> <tr align="center" bgcolor="#FFFFFF" id="1"> <td>1</td> <td><input name="listTd" type="radio" value="radiobutton" id="radio1"></td> <td><input name="p1" type="hidden" value="中国"> 中国</td> </tr> <tr align="center" bgcolor="#FFFFFF"> <td>2</td> <td><input name="listTd" type="radio" value="radiobutton" id="radio2"></td> <td><input type="hidden" name="p2" value="美国"> 美国</td> </tr> <tr align="center" bgcolor="#FFFFFF" id="3"> <td>3</td> <td><input name="listTd" type="radio" value="radiobutton" id="radio3"></td> <td><input type="hidden" name="p3" value="俄罗斯"> 俄罗斯</td> </tr> <tr align="center" bgcolor="#FFFFFF"> <td>4</td> <td><input name="listTd" type="radio" value="radiobutton" id="radio4"></td> <td><input type="hidden" name="p4" value="法 国"> 法 国</td> </tr> <tr align="center" bgcolor="#FFFFFF"> <td>5</td> <td><input name="listTd" type="radio" value="radiobutton" id="radio5"></td> <td><input type="hidden" name="p5" value="德 国"> 德 国</td> </tr> <tr align="center" bgcolor="#FFFFFF"> <td>6</td> <td><input name="listTd" type="radio" value="radiobutton" id="radio6"></td> <td><input type="hidden" name="p6" value="英 国"> 英 国</td> </tr> <tr align="center" bgcolor="#FFFFFF"> <td>7</td> <td><input name="listTd" type="radio" value="radiobutton" id="radio7"></td> <td><input type="hidden" name="p7" value="日 本"> 日 本</td> </tr> <tr align="center" bgcolor="#FFFFFF"> <td>8</td> <td><input name="listTd" type="radio" value="radiobutton" id="radio8"></td> <td><input type="hidden" name="p8" value="韩 国"> 韩 国</td> </tr> </table> </td> <td width="322" valign="top"><a href="javascript:SetRow('up');" class="btlink2" οnclick="">↑向上移动</a><div style="margin-top:10px"><a href="javascript:SetRow('down');" class="btlink" οnclick="">↓向下移动</a></div></td> </tr> </table>
</form></BODY></HTML>
