动态控制Table的js代码


Posted in Javascript onMarch 07, 2007

<table width="100%" border="1">
  <tr>
    <td width="10%"><table width="100%" height="100%" border="1">
      <tr>
        <td><input type="button" name="Submit3" value="最上" onClick="moveFirst()"></td>
      </tr>
      <tr>
        <td><input type="button" name="Submit" value="向上" onClick="moveUp()"></td>
      </tr>
      <tr>
        <td><input type="button" name="Submit2" value="向下" onClick="moveDown()"></td>
      </tr>
      <tr>
        <td><input type="button" name="Submit4" value="最下" onClick="moveEnd()"></td>
      </tr>
    </table></td>
    <td><table width="100%" border="1" id="DynaTable">
      <tr>
        <td><input type="radio" name="radio1" value="1" onClick="radioChecked(this)"></td>
        <td>第一个</td>
      </tr>
      <tr>
        <td><input type="radio" name="radio1" value="2" onClick="radioChecked(this)"></td>
        <td>第二个</td>
      </tr>
      <tr>
        <td><input type="radio" name="radio1" value="3" onClick="radioChecked(this)"></td>
        <td>第三个</td>
      </tr>
      <tr>
        <td><input type="radio" name="radio1" value="4" onClick="radioChecked(this)"></td>
        <td>第四个</td>
      </tr>
      <tr>
        <td><input type="radio" name="radio1" value="5" onClick="radioChecked(this)"></td>
        <td>第五个</td>
      </tr>
      <tr>
        <td><input type="radio" name="radio1" value="6" onClick="radioChecked(this)"></td>
        <td>第六个</td>
      </tr>
      <tr>
        <td><input type="radio" name="radio1" value="7" onClick="radioChecked(this)"></td>
        <td>第七个</td>
      </tr>
      <tr>
        <td><input type="radio" name="radio1" value="8" onClick="radioChecked(this)"></td>
        <td>第八个</td>
      </tr>
      <tr>
        <td><input type="radio" name="radio1" value="9" onClick="radioChecked(this)"></td>
        <td>第九个</td>
      </tr>
      <tr>
        <td><input type="radio" name="radio1" value="10" onClick="radioChecked(this)"></td>
        <td>第十个</td>
      </tr>
    </table></td>
  </tr>
</table>

<script language="javascript">
<!--
var moveRow=false;
var moveRadio=false;
function radioChecked(obj){
 moveRadio=obj;
 moveRow=obj.parentNode.parentNode;
}
function moveUp(){
 if(moveRow){ 
  var prevRow=moveRow.previousSibling;
  if(prevRow){
  document.all["DynaTable"].childNodes[0].insertBefore(moveRow,prevRow);
  moveRadio.checked=true;
  }
 }
}
function moveDown(){
 if(moveRow){ 
 var nexRow=moveRow.nextSibling;
 if(nexRow){
  var nnextRow=nexRow.nextSibling;  
  if(nnextRow){
   document.all["DynaTable"].childNodes[0].insertBefore(moveRow,nnextRow);
  }else{
   document.all["DynaTable"].childNodes[0].appendChild(moveRow);
  }
  moveRadio.checked=true;
 }
 }
}
function moveEnd(){
 if(moveRow){
  document.all["DynaTable"].childNodes[0].appendChild(moveRow);
  moveRadio.checked=true;
 }
}
function moveFirst(){
 if(moveRow){
  document.all["DynaTable"].childNodes[0].insertBefore(moveRow,document.all["DynaTable"].childNodes[0].firstChild);
  moveRadio.checked=true;
 }
}
//-->
</script>

Javascript 相关文章推荐
jquery索引在使用中的一些困惑
Oct 24 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
js+FSO遍历文件夹下文件并显示
Mar 07 #Javascript
学习js所必须要知道的一些
Mar 07 #Javascript
修改发贴的编辑功能
Mar 07 #Javascript
Javascript之文件操作
Mar 07 #Javascript
得到文本框选中的文字,动态插入文字的js代码
Mar 07 #Javascript
在textarea文本域中显示HTML代码的方法
Mar 06 #Javascript
一个高效的JavaScript压缩工具下载集合
Mar 06 #Javascript
You might like
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
社区学习十八大感想
2014/01/22 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
小学见习报告
2014/10/31 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫