1,用table做的镜框效果
?
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> </head> <body> <table border=15 style=border-style:ridge width=100% height=100%> <Tr valign=top><td>用table实现,注意其样式</td></tr></table> </body> </html>
?效果:
?2,让表格有提示信息
?
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> </head> <body> <table border="1" width="100%"> <tr title="第一行 提示信息"><td>表格1</td> <td>表格2</td></tr> <tr title="第二行"><td>表格3</td><td>表格4</td></tr> <tr title="第三行"><td>表格5</td><td>表格6</td></tr> </table> </body> </html>
?3,闪亮的表格边框
?
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> </head> <body> <table border="0" width="280" id="tb1" style="border:3px solid green"> <tr> <td> 这是一个闪亮的表格边框! </td> </tr> </table> <script language="JavaScript"> function flashTable() { if (!document.all) return //判断浏览器的类型 if (tb1.style.borderColor=="green") //判断表格的颜色是否是绿色 tb1.style.borderColor="red" //将颜色更改为红色 else tb1.style.borderColor="green" //将颜色更改为绿色 } setInterval("flashTable()", 400) //每隔400毫秒就更新下颜色 </script> </body> </html>
?4,表格的宽度固定后内容自动换行
?
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> </head> <body> <TABLE border="1" width="200"> <TR> <TD>dfad</TD> <TD style="word-wrap:break-word;width:100"> sfdaaaaadsfaaaaaafdasfasdfaaaaadfssadsfdasfsafsadfasdfsdfs</TD> </TR> </TABLE> </body> </html>
?5,表格的斜线
<HTML> <HEAD> <TITLE> 新文档</TITLE> </HEAD> <script Language="javascript"> function aline(x,y,color) { //实际画线的方法 document.write("<img border='0' style='position: absolute; left: "+(x+20)+"; top: "+(y+20)+";background-color: "+color+"' width=1 height=1>") } </script> <body leftmargin=20 topmargin=20> <TABLE border=0 bgcolor="000000" cellspacing="1" width=400> <TR bgcolor="FFFFFF"> <TD id="td1"> </TD> <TD>环境分</TD> <TD>人文分</TD> <TD>印象分</TD> </TR> <TR bgcolor="FFFFFF"> <TD>北京</TD> <TD>80</TD> <TD>90</TD> <TD>80</TD> </TR> <TR bgcolor="FFFFFF"> <TD>上海</TD> <TD>80</TD> <TD>70</TD> <TD>90</TD> </TR> <TR bgcolor="FFFFFF"> <TD>天津</TD> <TD>80</TD> <TD>70</TD> <TD>70</TD> </TR> </TABLE> <script> function line(x1,y1,x2,y2,color) //画线的方法 { var tmp if(x1>=x2) { tmp=x1; x1=x2; x2=tmp; tmp=y1; y1=y2; y2=tmp; } for(var i=x1;i<=x2;i++) //设置斜线的坐标 { x = i; y = (y2 - y1) / (x2 - x1) * (x - x1) + y1; aline(x,y,color); } } line(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,'#000000') //指定画线位置 </script> </BODY> </HTML>
?
6,表格中文字的滚动
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> </head> <body> <table border="1"><tr> <td>第一列</td><td> <marquee behavior="alternate" scrollamount="1" scrolldelay="100" width="230">第二列</marquee> </td><td>第三列</td> </tr></table></body> </html>
?
7,表格按下enter键 自动生成新的行
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> <script LANGUAGE="JavaScript"> function newRow() { if(event.keyCode=="13") //如果单击的是回车键 { var row= tbl.insertRow(1); //添加行 row.height="50"; //设置行高 var cell1= row.insertCell(0); //添加列 var cell2= row.insertCell(1); //添加列 cell1.innerHTML="第二行" //指定列内容 cell2.innerHTML="第二行第二列" } } </script> </head> <body> 鼠标放到第二列,然后按回车键<br /> <table id="tbl" border="1"><tr><td>第一行第一列</td> <td onkeypress="newRow()">第一行第二列</td></tr> </table> </body> </html>
?
?8?,单击表头 实现表的排序
<html> <head> <title>单击表格的表头,测试排序</title> <script language="javascript"> function sortTable(sortType) { var tb=document.getElementsByTagName("table")[0]; //获取要排序的表格 var arr=[]; //初始数组 for (var i=1;i<tb.rows.length;i++) //遍历表格中每一行 arr.push(tb.rows[i].cells[sortType].innerText); //将列的数据添加到数组中 sortType==0 ? arr.sort(function (a,b) {return a-b}) : arr.sort();//数组排序 for (var j=1;j<tb.rows.length;j++) tb.rows[j].cells[sortType].innerText=arr[j-1]; //输出排序后的结果 } </script> </head> <body> <table border="1"> <tr><th onclick="sortTable(0);">按数字排序</th><th onclick="sortTable(1);">按字符串排序</th></tr> <tr><td>563</td><td>张三</td></tr> <tr><td>425</td><td>abc</td></tr> <tr><td>452</td><td>历史</td></tr> <tr><td>548</td><td>北京</td></tr> <tr><td>42</td><td>xxx</td></tr> <tr><td>137</td><td>无zhoi</td></tr> </table> </body> <html>
?
9,表格中隐藏下级表格
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> </head> <body> <style type="text/css"> .color1 { color:#000080; cursor:hand;font-weight: bold; } .color2 { color:#464646; display:none; } </style> <table onclick="divClick(this);"> <tr class="color1"><td>1、在工作流不同阶段,加载不同的表单?</td></tr> <tr class="color2"><td> 我现在已经把自定义表单实现了,加WWF以后,要做的东西就不多了<br> 离可以作为工作流使用还有相当的开发工作量的</td></tr> <tr class="color1"><td>2、为什么一定要先交预付款?</td></tr> <tr class="color2"><td> 请问这个是text/x-scriptlet 这是个什么东东插件搜索服务显示是未知插件. . 金箭. <br> 哪位有的下载啊我弄了半天也没弄好请高人帮帮忙啊~~谢谢`~~<br> 款中扣除相应费用。同时,为保证您的用户购买域名、虚拟主机、FTP空间、数据库、企业邮局能实时开<br> 2007年1月17日1:26 PM. 似乎是个IE下用的控件 。</td></tr> <tr class="color1"><td>3、为什么我司的域名比较便宜?</td></tr> <tr class="color2"><td> 审核就把delete from SMT_cp where SMT_id in(1,2,3) 换成 update SMT_cp set 审核字段=1 where SMT_id in(1,2,3)就可以<br> SQL语句可以直接delete from SMT_cp where SMT_id in(1,2,3)删除</td></tr> </table> <SCRIPT language="javascript"> function divClick(tb) { var n = event.srcElement.parentNode.rowIndex; //获得父节点的行索引 if (n%2==0) //判断是否是被2整除的行-所有标题行都可以 { with(tb.rows[n+1].style) display= display=="none" ? "block" : "none";//让标题行的下一行显示 } } </SCRIPT> </body> </html>
?
10,动态该改变单元格列宽,
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <style> .resizeDivClass { position:relative; background-color:gray; width:2; z-index:1; left:expression(this.parentElement.offsetWidth-1); cursor:e-resize; } </style> <script language=javascript> //鼠标按下时的方法 function MouseDownToResize(obj) { obj.mouseDownX=event.clientX; //当前鼠标X坐标 obj.pareneTdW=obj.parentElement.offsetWidth; //父元素的宽度 obj.pareneTableW=table1.offsetWidth; //表格的宽度 obj.setCapture(); //捕获鼠标方法 } //鼠标移动时的方法 function MouseMoveToResize(obj) { if(!obj.mouseDownX) return false; //判断是否是否已经按下 var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; if(newWidth>0) { obj.parentElement.style.width = newWidth; table1.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;//重新设计宽度 } } //鼠标抬起时的方法 function MouseUpToResize(obj) { obj.releaseCapture(); //释放鼠标的捕获 obj.mouseDownX=0; //鼠标抬起 } </script> </head> <body> <table id=table1 STYLE="table-layout:fixed" > <tr bgcolor=cccccc > <td valign=top > <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font> 姓名</td> <td valign=top > <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font> 年龄</td> <td valign=top > <font class="resizeDivClass" onmousedown="MouseDownToResize(this);" onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font> 所在城市</td> </tr> <tr> <td>长三</td><td>35</td><td>中国山东省济南市天桥区</td> </tr> </table> </body> </html>
?
?