动态控制Table的js代码

mdwtsqagp

mdwtsqagp

2016-02-19 10:28

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。
table width="100%" border="1"
  tr
    td width="10%"table width="100%" height="100%" border="1"
      tr
        tdinput type="button" name="Submit3" value="最上" onClick="moveFirst()"/td
      /tr
      tr
        tdinput type="button" name="Submit" value="向上" onClick="moveUp()"/td
      /tr
      tr
        tdinput type="button" name="Submit2" value="向下" onClick="moveDown()"/td
      /tr
      tr
        tdinput type="button" name="Submit4" value="最下" onClick="moveEnd()"/td
      /tr
    /table/td
    tdtable width="100%" border="1" id="DynaTable"
      tr
        tdinput type="radio" name="radio1" value="1" onClick="radioChecked(this)"/td
        td第一个/td
      /tr
      tr
        tdinput type="radio" name="radio1" value="2" onClick="radioChecked(this)"/td
        td第二个/td
      /tr
      tr
        tdinput type="radio" name="radio1" value="3" onClick="radioChecked(this)"/td
        td第三个/td
      /tr
      tr
        tdinput type="radio" name="radio1" value="4" onClick="radioChecked(this)"/td
        td第四个/td
      /tr
      tr
        tdinput type="radio" name="radio1" value="5" onClick="radioChecked(this)"/td
        td第五个/td
      /tr
      tr
        tdinput type="radio" name="radio1" value="6" onClick="radioChecked(this)"/td
        td第六个/td
      /tr
      tr
        tdinput type="radio" name="radio1" value="7" onClick="radioChecked(this)"/td
        td第七个/td
      /tr
      tr
        tdinput type="radio" name="radio1" value="8" onClick="radioChecked(this)"/td
        td第八个/td
      /tr
      tr
        tdinput type="radio" name="radio1" value="9" onClick="radioChecked(this)"/td
        td第九个/td
      /tr
      tr
        tdinput 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
展开更多 50%)
分享

猜你喜欢

动态控制Table的js代码

Web开发
动态控制Table的js代码

JS实例:控制非法字符输入的JS代码

Web开发
JS实例:控制非法字符输入的JS代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

关于动态执行代码(js的Eval)

Web开发
关于动态执行代码(js的Eval)

js实现iframe动态调整高度的代码

Web开发
js实现iframe动态调整高度的代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

利用JS控制网页音乐的代码实例

Web开发
利用JS控制网页音乐的代码实例

js正则匹配table tr

Web开发
js正则匹配table tr

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

function, new function, new Function之间的区别

function, new function, new Function之间的区别

有若花期错落 - QQ伤感分组

有若花期错落 - QQ伤感分组
下拉加载更多内容 ↓