动态控制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 中介者模式实例
Dec 16 Javascript
js实现日期级联效果
Jan 23 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
原生JS轮播图插件
Feb 09 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
一文了解Vue中的nextTick
May 06 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
微信小程序关键字变色实现代码实例
Dec 13 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
Home Coffee Roasting
2021/03/03 咖啡文化
PHP开发大型项目的一点经验
2006/10/09 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python爬虫之百度API调用方法
2017/06/11 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
详解Python的三种可变参数
2019/05/08 Python
Python爬虫教程知识点总结
2020/10/19 Python
工厂厂长岗位职责
2013/11/08 职场文书
大学三年计划书范文
2014/04/30 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
党员思想汇报材料
2014/12/19 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
高三毕业感言
2015/07/30 职场文书
小学中队委竞选稿
2015/11/20 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python