动态控制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 获取URL参数的插件
Mar 04 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
KnockoutJs快速入门教程
May 16 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
常用的javascript设计模式
Jan 11 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 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 __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
银行毕业实习自我鉴定
2013/09/19 职场文书
就业自荐信
2013/12/04 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
开办饭店创业计划书
2013/12/28 职场文书
市场专员岗位职责
2014/02/14 职场文书
英文感谢信格式
2015/01/21 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
八年级物理教学反思
2016/02/19 职场文书
导游词之峨眉山
2019/12/16 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android