js 变更表结构

    技术2022-05-12  1

     

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


    最新回复(0)