js css 操作的table各种效果 第一篇

标签: js  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>
<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>

 

 

原文链接:加载失败,请重新获取