动态控制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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
JSON 数据格式介绍
Jan 13 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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获取服务器时间的实现代码
2013/06/07 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
jquery 选择器部分整理
2009/10/28 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
layui动态渲染生成select的option值方法
2019/09/23 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
原生js实现自定义滚动条
2021/01/20 Javascript
简单解析Django框架中的表单验证
2015/07/17 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
python with语句的原理与用法详解
2020/03/30 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
检讨书范文1000字
2015/01/28 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL