动态控制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 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
js 浏览器事件介绍
Mar 30 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
javascript无刷新评论实现方法
May 13 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
使用JS实现动态时钟
Mar 12 Javascript
vue实现信息管理系统
May 30 Javascript
JS中的继承操作实例总结
Jun 06 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
JS查看对象功能代码
2008/04/25 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python yield 小结和实例
2014/04/25 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
通用自荐信范文
2014/03/14 职场文书
卫生巾广告词
2014/03/18 职场文书
倡议书格式模板
2014/05/13 职场文书
公司节能减排方案
2014/05/16 职场文书
大学生党员承诺书
2014/05/20 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
Python基础知识之变量的详解
2021/04/14 Python