动态控制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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
jQuery链使用指南
Jan 20 Javascript
javascript表单事件处理方法详解
May 15 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
vue实现通讯录功能
Jul 14 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 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
一个颜色轮换的简单例子
2006/10/09 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
JavaScript效率调优经验
2009/06/04 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
pytorch 常用线性函数详解
2020/01/15 Python
django列表筛选功能的实现代码
2020/03/27 Python
Django中的AutoField字段使用
2020/05/18 Python
python如何调用百度识图api
2020/09/29 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
python FTP编程基础入门
2021/02/27 Python
机电专业个人自荐信格式模板
2013/09/23 职场文书
酒店管理毕业生自荐信
2013/10/24 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书