动态控制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中的escape及unescape函数的php实现代码
Sep 04 Javascript
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
关于JSON解析的实现过程解析
Oct 08 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 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/04/28 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
python实现无边框进度条的实例代码
2020/12/30 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
我的中国梦演讲稿800字
2014/08/19 职场文书
《秋思》教学反思
2016/02/23 职场文书