动态控制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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
为指定元素增加样式的js代码
Dec 09 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 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数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
浅析PHP绘图技术
2013/07/03 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
php检测useragent版本示例
2014/03/24 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
Js中sort()方法的用法
2006/11/04 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
JavaScript动态绑定详解
2017/09/14 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Python pip配置国内源的方法
2020/02/14 Python
基于python实现查询ip地址来源
2020/06/02 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
英语系本科生求职信范文
2013/12/18 职场文书
交通事故被告答辩状
2015/05/22 职场文书
法定代表人资格证明书
2015/06/18 职场文书
医院消毒隔离制度
2015/08/05 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
导游词之南京栖霞山
2019/10/18 职场文书