动态控制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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
document.getElementById介绍
Sep 13 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 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中Session的概念
2006/10/09 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php获取url参数方法总结
2014/11/13 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
Underscore源码分析
2015/12/30 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
基本DOM节点操作
2017/01/17 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python中字典的setdefault()方法教程
2017/02/07 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
高中语文教学反思
2014/01/16 职场文书
还款承诺书范文
2014/05/20 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
委托书格式要求
2015/01/28 职场文书
合作与交流自我评价
2015/03/09 职场文书
毕业论文致谢信
2015/05/14 职场文书
天鹅湖观后感
2015/06/09 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android