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

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

jscss表格各种效果 
阅读更多

11，动态改变表格的行顺序

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
<script language="javascript">
var beginMoving=false;   //判断是否移动的标识-移动开关
//鼠标按下时的操作
function MouseDownToMove(obj){
    obj.style.zIndex=1;               //样式
    obj.mouseDownY=event.clientY;     //鼠标Y坐标
    obj.mouseDownX=event.clientX;     //鼠标X坐标
    beginMoving=true;                 //开始移动
    obj.setCapture();                 //捕获鼠标操作
}
//鼠标按下并移动时的操作
function MouseMoveToMove(obj){
  if(!beginMoving) return false;
    //改变目标行的X.Y坐标
    obj.style.top = (event.clientY-obj.mouseDownY);
    obj.style.left = (event.clientX-obj.mouseDownX);
}
//鼠标抬起时的操作
function MouseUpToMove(obj){
    if(!beginMoving) return false;   
    obj.releaseCapture();           //释放对鼠标的捕获
    obj.style.top=0;              
    obj.style.left=0;
    obj.style.zIndex=0;
    beginMoving=false;             //关闭移动开关
    var tempTop=event.clientY-obj.mouseDownY;
    var tempRowIndex=(tempTop-tempTop%20)/20;  //根据行高度获取行位置索引
    if(tempRowIndex+obj.rowIndex <0 )
        tempRowIndex=-1;
    else tempRowIndex=tempRowIndex+obj.rowIndex;            //实际的行索引
    if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
    obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);  //移动行到指定位置
}
</script>
</head>
<body>
<TABLE WIDTH="300" BORDER="1" >
<TR  style='height:20;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD >第一行</TD><TD>第一行</TD><TD>第一行</TD></TR>
<TR  style='height:20;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD >第二行</TD><TD>第二行</TD><TD>第二行</TD></TR>
<TR  style='height:20;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD >第三行</TD><TD>第三行</TD><TD>第三行</TD></TR>
</TABLE>
</body>
</html>

 

12，用键盘实现表格的上下选择

<html>
<head>
<title>键盘方向键控制表格</title>
</head>
<body onKeyDown="keyCheck();">
<table width="80" bgcolor="#FFFFFF" height="60" border="1" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0">
  <tr>
	<td id="td1" width="80">第一行</td>
  </tr>
  <tr>
	<td id="td2" width="80">第二行</td>
  </tr>
  <tr>
	<td id="td3" width="80">第三行</td>
  </tr>
  <tr>
	<td id="td4" width="80">第四行</td>
  </tr>
  <tr>
	<td id="td5" width="80">第五行</td>
  </tr>
  <tr>
	<td id="td6" width="80">第六行</td>
  </tr>
</table>
<script language="javascript">
var tdIndex = 1;                                    //获取当前行的索引变量
document.all.td1.style.backgroundColor='#3366aa';  //设置列1的背景色
function keyCheck() {
	if (window.event.keyCode==38) {         //向上键
		for (var i=1;i<=6;i++) {
			eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色
		}
		if (tdIndex<=1) {
			document.all.td1.style.backgroundColor='#3366aa';       //到顶端时，只第一行颜色改变
			alert('已到顶端');
			return false;
		}
		else {
			tdIndex -= 1;                                            //行索引减小
			eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改变行的背景色
		}
	}
	if (window.event.keyCode==40) {             //向下键
		for (var i=1;i<=6;i++) {
			eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色
		}
		if (tdIndex>=6) {
			document.all.td6.style.backgroundColor='#3366aa';      //到顶端时，只第一行颜色改变
			alert('已到底端');
			return false;
		}
		else {
			tdIndex += 1;                                            //行索引增加
			eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改变行的背景色
		}
	}
}
</script>
</body>
</html>

 

13，滚动的表格

<html>
<head>
<title>无标题文档</title>
</head>
<body>
<div id="mydiv">
  <table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
      <td bgcolor="#FFFFFF">1</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">2</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">3</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">4</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">5</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">6</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">7</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">8</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">9</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">10</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">11</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">12</td>
    </tr>
  </table>
</div>
<script type="text/javascript">
    marque(320,196,"icefable1","box1left")
    var scrollElem;
    var stopscroll;
    var stoptime;
    var preTop;
    var leftElem;
    var currentTop;
    var marqueesHeight;
//为表格添加事件
function marque(width,height,marqueName,marqueCName)
{
	try{
	  marqueesHeight = height;
	  stopscroll     = false;

	  scrollElem = document.getElementById("mydiv");
	  with(scrollElem){
		style.width     = width;
		style.height    = marqueesHeight;
		style.overflow  = 'hidden';
		noWrap          = true;
	  }
	  scrollElem.onmouseover = new Function('stopscroll = true');
	  scrollElem.onmouseout  = new Function('stopscroll = false');
	  preTop     = 0; 
	  currentTop = 0; 
	  stoptime   = 0;
	  leftElem = document.getElementById("mydiv");
	  scrollElem.appendChild(leftElem.cloneNode(true));
	  init_srolltext();
	}catch(e) {}
}
//表格滚动的初始化
function init_srolltext()
{
  scrollElem.scrollTop = 0;
  setInterval('scrollUp()', 18);
}
//向上滚动的方法
function scrollUp()
{
  if(stopscroll) return;
  currentTop += 1;
  if(currentTop == marqueesHeight+1) {
    stoptime += 1;
    currentTop -= 1;
    if(stoptime == (marqueesHeight)*1) {   //停顿时间
      currentTop = 0;
      stoptime = 0;
    }
  }else{
    preTop = scrollElem.scrollTop;
    scrollElem.scrollTop += 1;
    if(preTop == scrollElem.scrollTop){
      scrollElem.scrollTop = marqueesHeight;
      scrollElem.scrollTop += 1;
    }
  }
}
</Script>
</body>
</html>

 

14，可以输入内容的表格

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>标题页</title>
    <script type="text/jscript">
      str="第一行|第一行|第二行|第二行";            //默认单元格数据
      b=str.split("|")                              //切割成数据数组
      for(var a in b)
      document.write ("<input type='text' value="+b[a]+">")//动态输出文本框
      </script>
  </head>
<body>
</body>
</html>

 

15，双击单元格可编辑

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<script>
function editCell(obj){
    if(obj.innerText==""){
      obj.innerHTML="<input value='' onblur='update(this.value)'>";               //插入输入框，失去焦点时更新
    }else{
      obj.innerHTML="<input value="+obj.innerText+" onblur='update(this.value)'>";//插入文本框，且指定内容
    }
}
function update(txt){
    document.getElementById("Td2").innerText=txt;                                //文本框失去焦点时，需要更新表格的内容
}
</script>
</head>
<body>
<table border="1"><tr><td id="Td2" onDblClick="editCell(this)">第一行第一列</td>
</tr></table></body>
</html>

 

16，类C# GridView的编辑效果

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新文档</title>
<style type="text/css">
input {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999999;
	background-color: #FFFFE1;
	border: 1px solid #999999;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<table width="80%"  border="1" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF" onclick="setEdit(event)" onkeydown="checkAdd(event)">
  <tr>
    <td width="20%">343</td>
    <td width="20%">sdf</td>
    <td width="20%">asdf</td>
    <td width="20%">asf</td>
    <td width="20%">35r32</td>
  </tr>
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
    <td>444</td>
    <td>555</td>
  </tr>
  <tr>
    <td>adfdsf</td>
    <td>adfdsf</td>
    <td>adfsdf  </td>
    <td>   dafssda</td>
    <td>  dafdsf</td>
  </tr>
  <tr>
    <td>2342432</td>
    <td>asdf</td>
    <td> dfsasdfds</td>
    <td>3243243</td>
    <td>asdfasf</td>
  </tr>
  <tr>
    <td>h</td>
    <td>ghhhh</td>
    <td>hhhh</td>
    <td>ea</td>
    <td>ghghhh</td>
  </tr>
</table>
</body>
</html>
<script language="javascript">
oldObj="";
var newInput=document.createElement("input");            //动态创建输入框
newInput.type="text";                                    //输入框类型
function setEdit(e){                                    //设置编辑时的状态
    var tdObj = e.srcElement? e.srcElement : (e.target ? e.target : e);//单击的对象
	var obj;
	if(tdObj.tagName && tdObj.tagName=="TD"){           //判断是否是单元格
		if(oldObj!=""){
            var tobj = document.getElementById('tmpText');//判断是否已经存在输入框
			oldObj.removeChild(tobj);                       //移除已经存在的输入框
			if(newInput.vlaue=="")                          //初始化输入框的值
              oldObj.innerHTML="&nbsp;";
			else 
              oldObj.innerHTML=newInput.value;              //输入框的内容等于单元格的内容
		}
		
		obj=tdObj;
		oldObj=obj;
		newInput.width=obj.offsetWidth;                     //输入框的高度和宽度
		newInput.height=obj.offsetHeight;

		newInput.id="tmpText";
		newInput.value=obj.innerHTML;
		obj.innerHTML="";
		obj.appendChild(newInput);                          //将输入框添加到单元格内
		newInput.focus();                                   //输入框获得焦点
	}
    tdObj = obj = tobj = null;
}
function checkAdd(e){
    if(e && e.keyCode == 13){                               //
       var obj = e.srcElement? e.srcElement : e.target;      //获得单击对象
       var tbl = obj.parentNode.parentNode;                   //单击对象的祖父节点
		if(oldObj!=""){
            var tobj = document.getElementById('tmpText');  //获取输入框
			oldObj.removeChild(tobj);                       //移除旧输入框
			if(newInput.vlaue=="") 
              oldObj.innerHTML="&nbsp;";            //单元格的初始值
			else 
              oldObj.innerHTML=newInput.value;      //单元格的内容等于输入框的内容
            var oldObj2 = oldObj;
            oldObj = '';
		}
       if(tbl.tagName && tbl.tagName == 'TR'){          //如果是单元行
         t2 = tbl.cloneNode(true);                      //克隆表格
         tbl.parentNode.insertBefore(t2,tbl);           //插入行
       }
       setEdit(oldObj2);                                  //开始编辑
    }
    obj = tbl = tobj = t2 = oldObj2 = null;
}
</script>
</body>
</html>

 

分享到：
| js css 操作的table各种效果 第一篇
评论
发表评论

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

相关推荐

    非常漂亮的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

    关键在于`tr:nth-child(even)`选择器，它会选择所有偶数行（即第二行、第四行等）并赋予它们指定的背景色。这便是斑马纹效果的核心。另外，我们还添加了一个`:hover`伪类，当鼠标悬停在某一行上时，该行的背景色会变...

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

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

    JS手动改变table的宽度

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

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

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

    js对Table排序经典

    用户可能希望从特定行开始排序，这可以通过增加额外参数或设置变量来实现，比如从第二行开始。 6. **排序逻辑**： 对于不同类型的数据，我们需要不同的排序策略。对于数字，我们可以使用`parseInt`或`parseFloat`...

    table2Excel.rar

    当遇到"table[0]"问题时，通常是因为Table2Excel.js默认选取的是页面中的第一个表格。在某些情况下，如果页面中存在多个表格，或者表格的DOM结构复杂，可能无法正确识别到用户期望导出的表格。解决这个问题的关键...

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

    本文将介绍如何通过Div和CSS实现类似表格的两列布局效果。这种布局技术不仅在样式上可以达到与表格类似的视觉效果，而且在灵活性和可维护性方面优于传统的HTML表格。 ### 实现步骤 1. **HTML结构设置** 要创建...

    bootstrap table 完整引用外部文件

    本篇文章将详细介绍如何完整引用Bootstrap Table的外部文件，包括CSS和JS，以便在项目中直接使用。 首先，我们需要理解Bootstrap Table的核心依赖：Bootstrap CSS框架、jQuery库和Bootstrap Table的特定JS文件。...

    html+css+js实现京东商城

    2. 接着，用CSS对这些元素进行样式设计，确保页面美观且符合品牌风格。 3. 使用JavaScript添加动态功能，例如，商品图片的预览、商品数量的增减、购物车的交互等。 4. 利用Ajax进行后端数据的交互，如商品信息的获取...

    bootstrap-table-merge-cells.js

    bootstrap table实现合并单元格效果,切换第二页也合并单元格效果，需要依赖于bootstrap-table.js,bootstrap table.css

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

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

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

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

    bootstrap集成table样式的总结

    本篇文章将深入探讨如何在Bootstrap中集成和使用Table样式。 一、基础样式 Bootstrap的表格默认具有简洁的样式，包括水平对齐的单元格、行高亮以及可选的striped（斑马纹）和bordered（带边框）样式。通过添加`...

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

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

    html js css基础教程（pdf）

    ### HTML JS CSS 基础教程知识点概览 #### 一、HTML基础知识 **1.1 互联网的起源与Web基础知识** - **互联网起源**：介绍互联网的发展历程及其对现代社会的影响。 - **什么是WWW（World Wide Web）**：解释万维网...

    javascript动态生成table及处理.

    ### JavaScript 动态生成 Table 及处理 在现代 Web 开发中，动态生成 HTML 元素是一种非常实用的技术，尤其当涉及到数据展示时，如表格（`&lt;table&gt;`）。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。...

    js获取table行 列 的值

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

    JavaScript Table行定位效果

    最后我用的方法是新建一个table，并把源tr克隆到新table中，然后通过对新table定位来实现效果。 用这个方法关键有两点，首先要做一个仿真度尽可能高的tr，还有是要准确的定位，这些请看后面的程序说明。 程序说明 ...

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