js css 操作的table各种成效 第二篇
日期：2014-05-17 浏览次数：20681 次
js css 操作的table各种效果 第二篇
11，动态改变表格的行顺序
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript">
var beginMoving=false; //判断是否移动的标识-移动开关
//鼠标按下时的操作
function MouseDownToMove(obj){
obj.style.zIndex=1; //样式
obj.mouseDownY=event.clientY; //鼠标Y坐标
obj.mouseDownX=event.clientX; //鼠标X坐标
beginMoving=true; //开始移动
obj.setCapture(); //捕获鼠标操作
}
//鼠标按下并移动时的操作
function MouseMoveToMove(obj){
if(!beginMoving) return false;
//改变目标行的X.Y坐标
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
//鼠标抬起时的操作
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture(); //释放对鼠标的捕获
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false; //关闭移动开关
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%20)/20; //根据行高度获取行位置索引
if(tempRowIndex+obj.rowIndex <0 )
tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex; //实际的行索引
if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex); //移动行到指定位置
}
</script>
</head>
<body>
<TABLE WIDTH="300" BORDER="1" >
<TR style='height:20;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD >第一行</TD><TD>第一行</TD><TD>第一行</TD></TR>
<TR style='height:20;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD >第二行</TD><TD>第二行</TD><TD>第二行</TD></TR>
<TR style='height:20;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD >第三行</TD><TD>第三行</TD><TD>第三行</TD></TR>
</TABLE>
</body>
</html>
?
12，用键盘实现表格的上下选择
<html>
<head>
<title>键盘方向键控制表格</title>
</head>
<body onKeyDown="keyCheck();">
<table width="80" bgcolor="#FFFFFF" height="60" border="1" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0">
<tr>
<td id="td1" width="80">第一行</td>
</tr>
<tr>
<td id="td2" width="80">第二行</td>
</tr>
<tr>
<td id="td3" width="80">第三行</td>
</tr>
<tr>
<td id="td4" width="80">第四行</td>
</tr>
<tr>
<td id="td5" width="80">第五行</td>
</tr>
<tr>
<td id="td6" width="80">第六行</td>
</tr>
</table>
<script language="javascript">
var tdIndex = 1; //获取当前行的索引变量
document.all.td1.style.backgroundColor='#3366aa'; //设置列1的背景色
function keyCheck() {
if (window.event.keyCode==38) { //向上键
for (var i=1;i<=6;i++) {
eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色
}
if (tdIndex<=1) {
document.all.td1.style.backgroundColor='#3366aa'; //到顶端时，只第一行颜色改变
alert('已到顶端');
return false;
}
else {
tdIndex -= 1; //行索引减小
eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改变行的背景色
}
}
if (window.event.keyCode==40) { //向下键
for (var i=1;i<=6;i++) {
eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色
}
if (tdIndex>=6) {
document.all.td6.style.backgroundColor='#3366aa'; //到顶端时，只第一行颜色改变
alert('已到底端');
return false;
}
else {
tdIndex += 1;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
