动态控制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学习网址备忘
May 29 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
Js面试算法详解
Apr 08 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
小程序自定义圆形进度条
Nov 17 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
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
php强制下载文件函数
2016/08/24 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
python实现吃苹果小游戏
2020/03/21 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
中文系师范生自荐信
2013/10/01 职场文书
安全责任书范本
2014/04/15 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
大型会议策划方案
2014/05/17 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
导游词之太原天龙山
2020/01/02 职场文书
python实现学员管理系统(面向对象版)
2022/06/05 Python