js css 操作的table各种成效 第一篇
日期：2014-05-17 浏览次数：20604 次
js css 操作的table各种效果 第一篇
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&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
