js 变更表结构

最新推荐文章于 2024-08-15 08:55:57 发布

qiuleng2002

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量524

点赞数

分类专栏：技术（JS）文章标签： radiobutton javascript function border table class

本文链接：https://blog.csdn.net/qiuleng2002/article/details/3174495

版权

技术（JS）专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

qiuleng2002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 变更表结构

交换行（支持键盘） .tr{background-color:blue}   var o1,o2;//全局记录选中的行，和要交换的行的对象 var o1a=new Array();//保存选中的行 var o2a=new Array();//保存要交换的行 var num=0;//选中的单元格所在行的索引 var numed=0;//要交换的行的索引//同SetRow
复制链接

扫一扫

专栏目录