<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>单元格移动</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body>
<table id="table1" width="273" border="0" cellpadding="1" cellspacing="1" bordercolor="#000000" bgcolor="#000000">
<tr bgcolor="#FFFFFF">
<td width="120">书名</td>
<td width="72">2006年销量</td>
<td width="71">2007年销量</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Delphi XX参考大全</td>
<td>40000册</td>
<td>50000册</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Delphi XX完全手册</td>
<td>45000册</td>
<td>55000册</td>
</tr>
</table> <script language="javascript">
var lastSelection = null;
//获取选择行或单元格的参数值
function select(element) {
var e, r, c;
if (element == null){e = window.event.srcElement;}
else { e = element; }
if (e.tagName == "TD") {
c = findCell(e);
if (c != null) {
if (lastSelection != null) {deselectRowOrCell(lastSelection);}
selectRowOrCell(c);
lastSelection = c;
}
}
window.event.cancelBubble = true;
}
table1.onclick=select;
//查找是否有单元格
function findCell(e) {
if (e.tagName == "TD") {return e;}
else if (e.tagName == "BODY") {return null;}
else{return findCell(e.parentElement);}
}
//选择行或单元格
function selectRowOrCell(r) {
r.runtimeStyle.backgroundColor="darkblue";
r.runtimeStyle.color="white";
}
//取消对行或单元格的选定
function deselectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "";
r.runtimeStyle.color = "";
}
//查找是否有行
function findRow(e) {
if (e.tagName == "TR") { return e; }
else if (e.tagName == "BODY") { return null; }
else { return findRow(e.parentElement); }
}
//单元格向左移
function moveLeft() {
var c, p, ls;
if (lastSelection == null) return false;
c = lastSelection;
if (c.tagName != "TD") { return null; }
ls = c.previousSibling;
if (ls == null) return null;
p = ls.parentElement;
p.insertBefore(c, ls);
return c;
}
//单元格向右移
function moveRight() {
var c, p, ls;
if (lastSelection == null) return false;
c = lastSelection;
if (c.tagName != "TD") {return null;}
ls = c.nextSibling;
if (ls == null) return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(c, ls);
return c;
}
</script>
<form name="form1" method="post" action="">
<input name="Button1" type="button" id="Button1" value="单元格左移" onclick="moveLeft()">
<input name="Button2" type="button" id="Button2" value="单元格右移" onclick="moveRight()
">
</form>
</body>
</html> |
注册 登录
