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=" ";
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=" "; //单元格的初始值
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>
?