`
海上明月共潮生--风铃
  • 浏览: 60165 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

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

jstable各种效果 
阅读更多

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>

 

 

  • 大小: 17.6 KB
分享到：
| jQuery 标签页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    非常漂亮的css+table+js BS模板

    标题 "非常漂亮的css+table+js BS模板" 暗示了这是一个基于Bootstrap框架的网页设计模板，结合了CSS、HTML表格（Table）以及JavaScript技术，以创建美观且功能丰富的用户界面。Bootstrap是一个流行的前端开发框架，...

    JS操作table大全

    在JavaScript的世界里，HTML表格（Table）是一种常用的数据展示方式，而JS操作表格则成为网页动态交互的关键。本文将深入探讨如何使用JavaScript进行表格的创建、修改、删除以及实现一些特殊效果。 首先，我们从...

    CSS样式Table[7] - table_zebra

    在本主题"CSS样式Table[7] - table_zebra"中，我们重点关注的是如何利用CSS创建具有斑马纹效果的表格，这是一种常见且美观的设计手法，可以提高表格的可读性，给用户带来更好的浏览体验。 斑马纹表格通常是指交替...

    原生js table表格自动排序效果

    总的来说，原生js table表格自动排序效果的实现涉及到HTML结构的理解、JavaScript事件处理、数组排序算法的运用以及DOM操作。这是一个实用的功能，通过学习和理解这个例子，可以提升我们对前端开发中数据处理和交互...

    js操作table行的上下移动，置顶置底

    在网页开发中，表格（Table）是一种常见的数据展示方式，而使用JavaScript进行交互式操作可以增强用户体验。本文将深入探讨如何使用JavaScript实现表格行的上下移动、置顶和置底功能，以及相关辅助操作。 首先，`js...

    JS手动改变table的宽度

    在网页设计中，JavaScript（JS）是一种常用的客户端脚本语言，用于增强用户的交互体验和动态更新页面内容。本文将深入探讨如何使用JavaScript手动改变HTML表格（table）的宽度，并结合鼠标选中文字查询功能，为用户...

    实现bootstrap table可设置列宽和可拖动列宽

    首先，我们需要确保在项目中已经正确引入了 Bootstrap Table 的相关 CSS 和 JavaScript 文件，包括 `bootstrap.min.css`、`bootstrap-table.min.css`、`bootstrap.min.js` 和 `bootstrap-table.min.js`。这些文件...

    js对Table排序经典

    在JavaScript（js）中，对HTML表格（Table）进行排序是一项常见的需求，特别是在网页交互和数据展示中。本文将深入探讨如何使用JavaScript实现点击表头进行动态排序，并处理各种复杂情况，如包含HTML标签的单元格、...

    jquery.table2excel.js（用于table导出Excel文件）

    // (可选) 指定要导出的表格的范围，如：'0:0'表示第一行第一列，'1:2'表示第二行第三列 sheets: { Sheet1: ["0:0", "1:1"] }, // (可选) 是否保留表格的CSS样式 excludeCSS: ".noExport", // (可选) 自定义...

    js获取table行 列 的值

    ### JavaScript 获取 Table 行列值的方法 在网页开发过程中，我们经常会遇到需要处理表格数据的情况。HTML 中的 `&lt;table&gt;` 元素是用来显示表格数据的标准方式之一，而使用 JavaScript 来操作这些表格中的数据则非常...

    移动端table固定表头与固定第一列

    对于不支持这些特性的老版本浏览器，可能需要使用一些JavaScript库如jQuery Fixed Header Table插件，或者使用传统的方法，如创建重复的表头和第一列，并通过JavaScript同步滚动状态。 总结起来，实现移动端table的...

    bootstrap table 完整引用外部文件

    1. 引用Bootstrap CSS：Bootstrap Table依赖于Bootstrap的样式，因此第一步是确保在HTML文档的`&lt;head&gt;`部分引入Bootstrap的CSS文件。通常，你可以从CDN（内容分发网络）获取Bootstrap的最新版本，例如： ```html ...

    div+css实现两列table效果示例

    此外，通过选择器`.cell:first-child`和`.cell:last-child`，我们可以分别移除第一列和最后一列单元格的左边框和右边框，从而避免重复边框的问题。 ### 应用场景 利用Div和CSS实现的两列（或更多列）布局在多种...

    JS实现动态修改table及合并单元格的方法示例

    这样，`tabObj`变量就包含了表格对象，我们可以对它进行各种操作。 要遍历和修改表格中的单元格，我们可以使用`rows`和`cells`属性。`rows`属性返回一个`HTMLTableRowElement`对象的集合，代表表格中的每一行。`...

    js Table相同行合并，数量汇总

    1. **获取表格数据**：使用JavaScript的DOM操作，如`document.getElementsByTagName('table')`找到表格元素，然后遍历`&lt;tr&gt;`和`&lt;td&gt;`，将单元格内容存储到一个二维数组中。 2. **比较并合并行**：遍历数组，检查...

    CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）.docx

    在这个例子中，我们使用了一个`&lt;table&gt;`元素，其中包含两行`&lt;tr&gt;`，第一行用于放置图片，第二行用于放置文字描述。关键在于，图片所在的`&lt;td&gt;`使用`&lt;a&gt;`包裹`&lt;img&gt;`标签，而文字描述则放在一个`&lt;div&gt;`标签内，这两个...

    利用js+css+html实现固定table的列头不动

    总结来说，实现固定table列头不动的技术主要涉及到CSS的绝对定位、JavaScript的事件监听和DOM操作。通过JavaScript动态调整固定表头的宽度和位置，以及CSS使其在滚动时始终保持可见，从而达到预期效果。这个方法不仅...

    JavaScript Table行定位效果

    程序第一步就是克隆原table： this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的（默认是...

    LayUi组件TableSelect

    总的来说，LayUI的TableSelect组件是JavaScript开发中的一个强大工具，它简化了在表格中处理选择操作的复杂性，提供了丰富的交互功能。开发者可以根据项目需求灵活定制，实现各种复杂的数据管理场景。

Magicbox
Global site tag (gtag.js) - Google Analytics