动态控制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 JSON的解析方式
Jul 25 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
js生成随机数的过程解析
Nov 24 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
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正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
jQuery 操作XML入门
2008/12/25 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python实现购物程序思路及代码
2017/07/24 Python
python 定时修改数据库的示例代码
2018/04/08 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Python for循环中的陷阱详解
2018/07/13 Python
python实现泊松图像融合
2018/07/26 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python调用staf自动化框架的方法
2018/12/26 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
python with语句的原理与用法详解
2020/03/30 Python
python让函数不返回结果的方法
2020/06/22 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
三个Unix的命令面试题
2015/04/12 面试题
应届生污水处理求职信
2013/11/06 职场文书
医院护士的求职信
2014/01/03 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
美术课外活动总结
2014/07/08 职场文书
单位计划生育责任书
2015/05/09 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书