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

最新推荐文章于 2020-12-11 10:41:47 发布
最新推荐文章于 2020-12-11 10:41:47 发布
阅读量349 收藏 1
点赞数
分类专栏： javascript 文章标签： js table 各种效果 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_8463/article/details/82405441
版权

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 οnkeypress="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 οnclick="sortTable(0);">按数字排序</th><th οnclick="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 οnclick="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" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);"></font>
姓名</td>
<td valign=top >
<font class="resizeDivClass" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);"></font>
年龄</td>
<td valign=top >
<font class="resizeDivClass" οnmοusedοwn="MouseDownToResize(this);" οnmοusemοve="MouseMoveToResize(this);" οnmοuseup="MouseUpToResize(this);"></font>
所在城市</td>
</tr>

<tr>
<td>长三</td><td>35</td><td>中国山东省济南市天桥区</td>
</tr>
</table>
</body>
</html>

 

 

iteye_8463
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css Table布局-display:table
qq_35396397的博客
11-22 737
使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。 尽管反对的理由看起来证据很充分，但是大多数开发者除了谴责基于表格的布局，都无法提供完善的使用场景。 “表格不好。” 从早期反对HTML Table（<table>标签）开始这种势头就非常强劲。 几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。 诚然，我也是避免使用...
10.html中固定table的第一列.docx
07-14
在网页设计中，为了提升用户体验，有时需要实现一种效果，即在表格中固定第一列或某些列，使得在横向滚动时，这些列始终保持可见。这种技术通常被称为“固定列”或者“冻结列”。在HTML中，我们可以利用CSS的...
CSS样式TABLE的一些特效
03-17
CSS样式TABLE的一些特效,做网页很有用的！
JS+CSS的table表格特效
10-15
超好用JS+CSS的table表格特效(包括复选框全选、表格加滚动条点击行变色等）
js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）...
lifeneedyou的专栏
04-29 344
       记得以前面试的时候遇到过这样一个问题：有一个表格，然后有４个输入框，一个合并 按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并 。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图：   第1/1列 第1/2列 第1/3列 第1...
分享一个自己写的table表格排序js插件(高效简洁)
weixin_33967071的博客
10-29 151
　　在前不久做的一个web项目中，需要实现js表格排序的效果，当时为了省事，就在网上找了几个相关的js插件，像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法，就没有使用)、原生态js的table排序插件等，最后比较看了下——采用了一个原生态js的table排序插件,并在其基础上做了些修改，虽有些勉强或有些地方使用不太舒服，但最算是比较好的实现了当时需要的功能。而前两天，对...
js table学习笔记
某风吾起的博客
05-25 6987
文章目录一、tabletable 编写格式table 的css 样式1.border表格边框：table border列边框：td boader表头边框：th bordercollapse 折叠 去表格项之间的空白bordr总结：2.padding 内边距3. 表格字体居中 text-align: center;4. 表格居中 margin: auto;5. 列扩展 colspantable的作业1. 表格界面的制作 一、table <table border="1" cellspacing
利用js+css+html实现固定table的列头不动
11-26
总结来说，实现固定table列头不动的技术主要涉及到CSS的绝对定位、JavaScript的事件监听和DOM操作。通过JavaScript动态调整固定表头的宽度和位置，以及CSS使其在滚动时始终保持可见，从而达到预期效果。这个方法不仅...
移动端table固定表头与固定第一列
02-20
对于不支持这些特性的老版本浏览器，可能需要使用一些JavaScript库如jQuery Fixed Header Table插件，或者使用传统的方法，如创建重复的表头和第一列，并通过JavaScript同步滚动状态。 总结起来，实现移动端table的...
非常漂亮的css+table+js BS模板
12-01
标题 "非常漂亮的css+table+js BS模板" 暗示了这是一个基于Bootstrap框架的网页设计模板，结合了CSS、HTML表格（Table）以及JavaScript技术，以创建美观且功能丰富的用户界面。Bootstrap是一个流行的前端开发框架，...
js实现漂亮的table表格
07-27
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
js创建table表格
02-14
js创建table表格，有下拉框，输入框，真实可用，适合使用，学习
自己做的一个基于javascript和css的table表格模板，非常漂亮
11-23
自己做的一个基于javascript和css的table表格模板，非常漂亮,直接拿过来用就可以了
好看的css table样式
01-19
好看的css table样式 常见用于报表相关
js 操作 table
weibingbing_net的专栏
07-27 974
jsp页面表格布局 Html代码  body onload="show()">      center>         input type="text" value="111" id="mytext">         table border="1" width="60%" id="mytable">             tr>         
JS+CSS实现Table样式变化
沧海一小粟
06-27 1032
本例实现的功能如下： 1.表格中单元格内容超出单元格大小后不换行处理（以...的方式显示-针对IE）。 2.表格中内容超出div范围后处理。 3.表格的表头不随滚动条滚动处理。 代码如下： [code="java"] 表格样例 //点击更多时产生滚动条效果 function showCroll() { ...
js--table表格操作
you些话的博客
12-11 979
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ text-align: center; } /*设置表格居中*/ #ta{ margin: auto; } /*设置表格的行样式*/ #ta tr{ .
js css 操作的table各种效果 第二篇
清风拂过
08-30 130
11，动态改变表格的行顺序 &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;title&gt;无标题页&lt;/title&gt; &lt;script language="javascript"&gt; var beginMoving=false; //判断是否移动的标识-移动开
jQuery操作Table技巧详解
- 删除除第一列外的所有列，可以使用如下代码： ```javascript $("#table1 tr th:not(:nth-child(1))").remove(); $("#table1 tr td:not(:nth-child(1))").remove(); ``` 这些技巧可以帮助开发者更高效地控制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值