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

最新推荐文章于 2021-08-03 21:07:33 发布

iteye_8463

最新推荐文章于 2021-08-03 21:07:33 发布

阅读量131

点赞数

分类专栏： javascript 文章标签： js css 表格各种效果 ViewUI

本文链接：https://blog.csdn.net/iteye_8463/article/details/82405452

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'><TD >第一行</TD><TD>第一行</TD><TD>第一行</TD></TR>
<TR  style='height:20;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'><TD >第二行</TD><TD>第二行</TD><TD>第二行</TD></TR>
<TR  style='height:20;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='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='' οnblur='update(this.value)'>";               //插入输入框，失去焦点时更新
    }else{
      obj.innerHTML="<input value="+obj.innerText+" οnblur='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" οnclick="setEdit(event)" οnkeydοwn="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>