动态控制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 toggle使用分析
Nov 16 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
js中跨域方法原理详解
Jul 19 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
JS面向对象编程详解
Mar 06 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
Angular5.1新功能分享
Dec 21 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
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
javascript json2 使用方法
2010/03/16 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
node.js超时timeout详解
2014/11/26 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
python读取oracle函数返回值
2016/07/18 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
pandas string转dataframe的方法
2018/04/11 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
小学教师师德师风承诺书
2015/04/28 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
中秋节随笔
2015/08/15 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python