当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 动态控制Table的js代码

Javascript
图片展示效果 鼠标经过变大图,支持FF
可拖动可改变大小div的实现代码
javascript 随机广告代码(图片广告)
JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
JQuery 浮动导航栏实现代码
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
js 分栏效果实现代码
基于jQuery的ajax功能实现web service的json转化
IE 条件注释详解总结(附实例代码)
用cssText批量修改样式
JavaScript 应用技巧集合[推荐]
jquery 导航设计实现代码 学习jquery的朋友可以看下
动态样式类封装JS代码
一步一步教你写一个jQuery的插件教程(Plugin)
使用jQuery的ajax功能实现的RSS Reader 代码
jquery tools 系列 scrollable(2)
jquery tools系列 overlay 学习
jquery tools系列 expose 学习
javascript十个最常用的自定义函数(中文版)
javascript 流畅动画实现原理

Javascript 中的 动态控制Table的js代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 194 ::
收藏到网摘: n/a

<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>