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; //行索引增加eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改变行的背景色}}}</script></body></html>?
13，滚动的表格
<html><head><title>无标题文档</title></head><body><div id="mydiv"> <table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC"> <tr> <td bgcolor="#FFFFFF">1</td> </tr> <tr> <td bgcolor="#FFFFFF">2</td> </tr> <tr> <td bgcolor="#FFFFFF">3</td> </tr> <tr> <td bgcolor="#FFFFFF">4</td> </tr> <tr> <td bgcolor="#FFFFFF">5</td> </tr> <tr> <td bgcolor="#FFFFFF">6</td> </tr> <tr> <td bgcolor="#FFFFFF">7</td> </tr> <tr> <td bgcolor="#FFFFFF">8</td> </tr> <tr> <td bgcolor="#FFFFFF">9</td> </tr> <tr> <td bgcolor="#FFFFFF">10</td> </tr> <tr> <td bgcolor="#FFFFFF">11</td> </tr> <tr> <td bgcolor="#FFFFFF">12</td> </tr> </table></div><script type="text/javascript"> marque(320,196,"icefable1","box1left") var scrollElem; var stopscroll; var stoptime; var preTop; var leftElem; var currentTop; var marqueesHeight;//为表格添加事件function marque(width,height,marqueName,marqueCName){try{ marqueesHeight = height; stopscroll = false; scrollElem = document.getElementById("mydiv"); with(scrollElem){style.width = width;style.height = marqueesHeight;style.overflow = 'hidden';noWrap = true; } scrollElem.onmouseover = new Function('stopscroll = true'); scrollElem.onmouseout = new Function('stopscroll = false'); preTop = 0; currentTop = 0; stoptime = 0; leftElem = document.getElementById("mydiv"); scrollElem.appendChild(leftElem.cloneNode(true)); init_srolltext();}catch(e) {}}//表格滚动的初始化function init_srolltext(){ scrollElem.scrollTop = 0; setInterval('scrollUp()', 18);}//向上滚动的方法function scrollUp(){ if(stopscroll) return; currentTop += 1; if(currentTop == marqueesHeight+1) { stoptime += 1; currentTop -= 1; if(stoptime == (marqueesHeight)*1) { //停顿时间 currentTop = 0; stoptime = 0; } }else{ preTop = scrollElem.scrollTop; scrollElem.scrollTop += 1; if(preTop == scrollElem.scrollTop){ scrollElem.scrollTop = marqueesHeight; scrollElem.scrollTop += 1; } }}</Script></body></html>?
14，可以输入内容的表格
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> <script type="text/jscript"> str="第一行|第一行|第二行|第二行"; //默认单元格数据 b=str.split("|") //切割成数据数组 for(var a in b) document.write ("<input type='text' value="+b[a]+">")//动态输出文本框 </script> </head><body></body></html>?
15，双击单元格可编辑
<html xmlns="http://www.w3.org/1999/xhtml" ><head><title>标题页</title><script>function editCell(obj){ if(obj.innerText==""){ obj.innerHTML="<input value='' onblur='update(this.value)'>"; //插入输入框，失去焦点时更新 }else{ obj.innerHTML="<input value="+obj.innerText+" onblur='update(this.value)'>";//插入文本框，且指定内容 }}function update(txt){ document.getElementById("Td2").innerText=txt; //文本框失去焦点时，需要更新表格的内容}</script></head><body><table border="1"><tr><td id="Td2" onDblClick="editCell(this)">第一行第一列</td></tr></table></body></html>?
16，类C# GridView的编辑效果
<html><head><meta http-equiv="Content-Type" content="text/html; charset=big5"><title>新文档</title><style type="text/css">input {font-family: Geneva, Arial, Helvetica, sans-serif;font-size: 12px;color: #999999;background-color: #FFFFE1;border: 1px solid #999999;}</style></head><body><div id="mydiv"></div><table width="80%" border="1" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF" onclick="setEdit(event)" onkeydown="checkAdd(event)"> <tr> <td width="20%">343</td> <td width="20%">sdf</td> <td width="20%">asdf</td> <td width="20%">asf</td> <td width="20%">35r32</td> </tr> <tr> <td>111</td> <td>222</td> <td>333</td> <td>444</td> <td>555</td> </tr> <tr> <td>adfdsf</td> <td>adfdsf</td> <td>adfsdf </td> <td> dafssda</td> <td> dafdsf</td> </tr> <tr> <td>2342432</td> <td>asdf</td> <td> dfsasdfds</td> <td>3243243</td> <td>asdfasf</td> </tr> <tr> <td>h</td> <td>ghhhh</td> <td>hhhh</td> <td>ea</td> <td>ghghhh</td> </tr></table></body></html><script language="javascript">oldObj="";var newInput=document.createElement("input"); //动态创建输入框newInput.type="text"; //输入框类型function setEdit(e){ //设置编辑时的状态 var tdObj = e.srcElement? e.srcElement : (e.target ? e.target : e);//单击的对象var obj;if(tdObj.tagName && tdObj.tagName=="TD"){ //判断是否是单元格if(oldObj!=""){ var tobj = document.getElementById('tmpText');//判断是否已经存在输入框oldObj.removeChild(tobj); //移除已经存在的输入框if(newInput.vlaue=="") //初始化输入框的值 oldObj.innerHTML=" ";else oldObj.innerHTML=newInput.value; //输入框的内容等于单元格的内容}obj=tdObj;oldObj=obj;newInput.width=obj.offsetWidth; //输入框的高度和宽度newInput.height=obj.offsetHeight;newInput.id="tmpText";newInput.value=obj.innerHTML;obj.innerHTML="";obj.appendChild(newInput); //将输入框添加到单元格内newInput.focus(); //输入框获得焦点} tdObj = obj = tobj = null;}function checkAdd(e){ if(e && e.keyCode == 13){ // var obj = e.srcElement? e.srcElement : e.target; //获得单击对象 var tbl = obj.parentNode.parentNode; //单击对象的祖父节点if(oldObj!=""){ var tobj = document.getElementById('tmpText'); //获取输入框oldObj.removeChild(tobj); //移除旧输入框if(newInput.vlaue=="") oldObj.innerHTML=" "; //单元格的初始值else oldObj.innerHTML=newInput.value; //单元格的内容等于输入框的内容 var oldObj2 = oldObj; oldObj = '';} if(tbl.tagName && tbl.tagName == 'TR'){ //如果是单元行 t2 = tbl.cloneNode(true); //克隆表格 tbl.parentNode.insertBefore(t2,tbl); //插入行 } setEdit(oldObj2); //开始编辑 } obj = tbl = tobj = t2 = oldObj2 = null;}</script></body></html>?