动态控制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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
Script的加载方法小结
Jan 12 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
webpack4简单入门实例
Sep 06 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
公开服务承诺制度
2014/03/26 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
校园安全标语
2014/06/07 职场文书
摩登时代观后感
2015/06/03 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS