*****************************************************************
动态排序号(包括中文排序的例子)
*****************************************************************
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>数据重排</TITLE>
<style type="text/css">
<!--
TD {
FONT-SIZE: 12px
}
.arrow {
FONT-WEIGHT: normal; FONT-FAMILY: Marlett; LETTER-SPACING: -3px; POSITION: relative; TOP: 2px
}
-->
</style>
</HEAD>
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0"><SCRIPT language=JavaScript>
/////////////////////////////////////////////// var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;
if (ie5 || dom)
initSortTable();
function initSortTable() {
arrowUp = document.createElement("SPAN");
var tn = document.createTextNode("5");
arrowUp.appendChild(tn);
arrowUp.className = "arrow";
arrowDown = document.createElement("SPAN");
var tn = document.createTextNode("6");
arrowDown.appendChild(tn);
arrowDown.className = "arrow";
}function sortTable(tableNode, nCol, bDesc, sType) {
var tBody = tableNode.tBodies[0];
var trs = tBody.rows;
var a = new Array();
for (var i=0; i<trs.length; i++) {
a[i] = trs[i];
}
a.sort(compareByColumn(nCol,bDesc,sType));
for (var i=0; i<a.length; i++) {
tBody.appendChild(a[i]);
}
}
function CaseInsensitiveString(s) {
return String(s).toUpperCase();
}
function parseDate(s) {
return Date.parse(s.replace(/\-/g, '/'));
}function toNumber(s) {
return Number(s.replace(/[^0-9\.]/g, ""));
}
function compareByColumn(nCol, bDescending, sType) {
var c = nCol;
var d = bDescending;
var fTypeCast = String;
if (sType == "Number")
fTypeCast = Number;
else if (sType == "Date")
fTypeCast = parseDate;
else if (sType == "CaseInsensitiveString")
fTypeCast = CaseInsensitiveString;
return function (n1, n2) {
if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
return d ? -1 : +1;
if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
return d ? +1 : -1;
return 0;
};
}function sortColumn(e) {
var tmp, el, tHeadParent;
if (ie5)
tmp = e.srcElement;
else if (dom)
tmp = e.target;
tHeadParent = getParent(tmp, "THEAD");
el = getParent(tmp, "TD");
if (tHeadParent == null)
return;
if (el != null) {
var p = el.parentNode;
var i;
if (el._descending)
el._descending = false;
else
el._descending = true;
if (tHeadParent.arrow != null) {
if (tHeadParent.arrow.parentNode != el) {
tHeadParent.arrow.parentNode._descending = null; //重新排序
}
tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
}
if (el._descending)
tHeadParent.arrow = arrowDown.cloneNode(true);
else
tHeadParent.arrow = arrowUp.cloneNode(true);
el.appendChild(tHeadParent.arrow);
//
for (i=0; i<p.cells.length; i++) {
if (p.cells[i] == el) break;
}
var table = getParent(el, "TABLE");
sortTable(table,i,el._descending, el.getAttribute("type"));
}
}function getInnerText(el) {
if (ie5) return el.innerText;
var str = "";
for (var i=0; i<el.childNodes.length; i++) {
switch (el.childNodes.item(i).nodeType) {
case 1: //单元节点
str += getInnerText(el.childNodes.item(i));
break;
case 3: //文本节点
str += el.childNodes.item(i).nodeValue;
break;
}
}
return str;
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
return el;
else
return getParent(el.parentNode, pTagName);
}function subMenu_Over(obj) {
obj.style.backgroundColor = '#B6BDD2';
obj.style.border = '1px #0A246A solid';
} function subMenu_Out(obj) {
obj.style.backgroundColor = '';
obj.style.border = '1px #E2DFDA solid';
}
</SCRIPT><br><br>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id=statusbar> </td>
</tr>
</table>
<table width="400" border=1 align="center" cellpadding="0" cellspacing="0" bordercolorlight="#666666" bordercolordark="#FFFFFF" onclick=sortColumn(event) onSelectStart="return false;" onContextMenu="return false;">
<THEAD>
<TR align="center" bgcolor="#eeeeee">
<TD width="39" height="20">序号</TD>
<TD width="144">中文测试</TD>
<TD width="39">数字</TD>
<TD width="58">字母</TD>
<TD width="108">日期测试</TD>
</TR>
</THEAD> <TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >01</TD>
<TD >测试</TD>
<TD align="center" >2</TD>
<TD align="center" >a</TD>
<TD >2001-02-00 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >02 </TD>
<TD >真的测试吗</TD>
<TD align="center" >15 </TD>
<TD align="center" >b</TD>
<TD >2001 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >03 </TD>
<TD >不要测试了</TD>
<TD align="center" >10 </TD>
<TD align="center" >c</TD>
<TD >2000-07-00 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >04 </TD>
<TD >测试吧</TD>
<TD align="center" >15 </TD>
<TD align="center" >d</TD>
<TD >2000-01-00 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >05 </TD>
<TD >明天在测</TD>
<TD align="center" >9 </TD>
<TD align="center" >e</TD>
<TD >1997-11-00 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >06 </TD>
<TD >测啥呀,</TD>
<TD align="center" >0 </TD>
<TD align="center" >f</TD>
<TD >1997 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >07 </TD>
<TD >我不干,你自己测吧</TD>
<TD align="center" >0 </TD>
<TD align="center" >g</TD>
<TD >1997 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >08 </TD>
<TD >把根留住呀</TD>
<TD align="center" >0 </TD>
<TD align="center" >h</TD>
<TD >1997 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >09 </TD>
<TD >留天头呀</TD>
<TD align="center" >0 </TD>
<TD align="center" >i</TD>
<TD >1996-03-00 </TD>
</TR>
</TABLE>
<script>
statusbar.innerHTML=" 数据准备完毕……";
</script>
</BODY>
</HTML>
动态排序号(包括中文排序的例子)
*****************************************************************
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>数据重排</TITLE>
<style type="text/css">
<!--
TD {
FONT-SIZE: 12px
}
.arrow {
FONT-WEIGHT: normal; FONT-FAMILY: Marlett; LETTER-SPACING: -3px; POSITION: relative; TOP: 2px
}
-->
</style>
</HEAD>
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0"><SCRIPT language=JavaScript>
/////////////////////////////////////////////// var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;
if (ie5 || dom)
initSortTable();
function initSortTable() {
arrowUp = document.createElement("SPAN");
var tn = document.createTextNode("5");
arrowUp.appendChild(tn);
arrowUp.className = "arrow";
arrowDown = document.createElement("SPAN");
var tn = document.createTextNode("6");
arrowDown.appendChild(tn);
arrowDown.className = "arrow";
}function sortTable(tableNode, nCol, bDesc, sType) {
var tBody = tableNode.tBodies[0];
var trs = tBody.rows;
var a = new Array();
for (var i=0; i<trs.length; i++) {
a[i] = trs[i];
}
a.sort(compareByColumn(nCol,bDesc,sType));
for (var i=0; i<a.length; i++) {
tBody.appendChild(a[i]);
}
}
function CaseInsensitiveString(s) {
return String(s).toUpperCase();
}
function parseDate(s) {
return Date.parse(s.replace(/\-/g, '/'));
}function toNumber(s) {
return Number(s.replace(/[^0-9\.]/g, ""));
}
function compareByColumn(nCol, bDescending, sType) {
var c = nCol;
var d = bDescending;
var fTypeCast = String;
if (sType == "Number")
fTypeCast = Number;
else if (sType == "Date")
fTypeCast = parseDate;
else if (sType == "CaseInsensitiveString")
fTypeCast = CaseInsensitiveString;
return function (n1, n2) {
if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
return d ? -1 : +1;
if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
return d ? +1 : -1;
return 0;
};
}function sortColumn(e) {
var tmp, el, tHeadParent;
if (ie5)
tmp = e.srcElement;
else if (dom)
tmp = e.target;
tHeadParent = getParent(tmp, "THEAD");
el = getParent(tmp, "TD");
if (tHeadParent == null)
return;
if (el != null) {
var p = el.parentNode;
var i;
if (el._descending)
el._descending = false;
else
el._descending = true;
if (tHeadParent.arrow != null) {
if (tHeadParent.arrow.parentNode != el) {
tHeadParent.arrow.parentNode._descending = null; //重新排序
}
tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
}
if (el._descending)
tHeadParent.arrow = arrowDown.cloneNode(true);
else
tHeadParent.arrow = arrowUp.cloneNode(true);
el.appendChild(tHeadParent.arrow);
//
for (i=0; i<p.cells.length; i++) {
if (p.cells[i] == el) break;
}
var table = getParent(el, "TABLE");
sortTable(table,i,el._descending, el.getAttribute("type"));
}
}function getInnerText(el) {
if (ie5) return el.innerText;
var str = "";
for (var i=0; i<el.childNodes.length; i++) {
switch (el.childNodes.item(i).nodeType) {
case 1: //单元节点
str += getInnerText(el.childNodes.item(i));
break;
case 3: //文本节点
str += el.childNodes.item(i).nodeValue;
break;
}
}
return str;
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())
return el;
else
return getParent(el.parentNode, pTagName);
}function subMenu_Over(obj) {
obj.style.backgroundColor = '#B6BDD2';
obj.style.border = '1px #0A246A solid';
} function subMenu_Out(obj) {
obj.style.backgroundColor = '';
obj.style.border = '1px #E2DFDA solid';
}
</SCRIPT><br><br>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id=statusbar> </td>
</tr>
</table>
<table width="400" border=1 align="center" cellpadding="0" cellspacing="0" bordercolorlight="#666666" bordercolordark="#FFFFFF" onclick=sortColumn(event) onSelectStart="return false;" onContextMenu="return false;">
<THEAD>
<TR align="center" bgcolor="#eeeeee">
<TD width="39" height="20">序号</TD>
<TD width="144">中文测试</TD>
<TD width="39">数字</TD>
<TD width="58">字母</TD>
<TD width="108">日期测试</TD>
</TR>
</THEAD> <TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >01</TD>
<TD >测试</TD>
<TD align="center" >2</TD>
<TD align="center" >a</TD>
<TD >2001-02-00 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >02 </TD>
<TD >真的测试吗</TD>
<TD align="center" >15 </TD>
<TD align="center" >b</TD>
<TD >2001 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >03 </TD>
<TD >不要测试了</TD>
<TD align="center" >10 </TD>
<TD align="center" >c</TD>
<TD >2000-07-00 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >04 </TD>
<TD >测试吧</TD>
<TD align="center" >15 </TD>
<TD align="center" >d</TD>
<TD >2000-01-00 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >05 </TD>
<TD >明天在测</TD>
<TD align="center" >9 </TD>
<TD align="center" >e</TD>
<TD >1997-11-00 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >06 </TD>
<TD >测啥呀,</TD>
<TD align="center" >0 </TD>
<TD align="center" >f</TD>
<TD >1997 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >07 </TD>
<TD >我不干,你自己测吧</TD>
<TD align="center" >0 </TD>
<TD align="center" >g</TD>
<TD >1997 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >08 </TD>
<TD >把根留住呀</TD>
<TD align="center" >0 </TD>
<TD align="center" >h</TD>
<TD >1997 </TD>
</TR>
<TR onMouseOver="subMenu_Over(this)" onMouseOut="subMenu_Out(this)">
<TD height="20" align="center" >09 </TD>
<TD >留天头呀</TD>
<TD align="center" >0 </TD>
<TD align="center" >i</TD>
<TD >1996-03-00 </TD>
</TR>
</TABLE>
<script>
statusbar.innerHTML=" 数据准备完毕……";
</script>
</BODY>
</HTML>
简单的选项卡
************************************************
<script language=javascript>
var lastid = this;
var firstclick=true;
function changecolor(t,colors,colore)
{
var nid;
nid=t;
if (firstclick==true){
firstclick=false;
nid.bgColor=colors;
lastid.bgColor=colore;
lastid=nid;
}else if (lastid!=nid){
nid.bgColor=colors;
lastid.bgColor=colore;
lastid=nid;
}}</script><body>
<table border=1 bordercolor="#ffffff" >
<tr>
<td width=50 id=a bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >1
</td>
<td width=50 id=b bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >2
</td>
<td width=50 id=c bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >3
</td>
<td width=50 id=d bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >4
</td>
<td width=50 id=e bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >5
</td>
</tr>
</table>
</body>
<tr bgcolor="#FFFFFF">
<td width="97" id="id1">你好</td>
<td width="99" id="id2">2004-12-1</td>
<td width="98" id="id3">1</td>
<td width="98" id="id4">100%</td>
<td width="102" id="id5">a</td>
</tr>
<tr bgcolor="#FFFFFF">
<td id="id1">你好</td>
<td id="id2">2004-12-1</td>
<td id="id3">1</td>
<td id="id4">100%</td>
<td id="id5">b</td>
</tr>
<tr bgcolor="#FFFFFF">
<td id="id1">不好</td>
<td id="id2">2004-12-1</td>
<td id="id3">1</td>
<td id="id4">90%</td>
<td id="id5">b</td>
</tr>
<tr bgcolor="#FFFFFF">
<td id="id1">不好</td>
<td id="id2">2004-2-1</td>
<td id="id3">1</td>
<td id="id4">90%</td>
<td id="id5">a</td>
</tr>
<tr bgcolor="#FFFFFF">
<td id="id1">不好</td>
<td id="id2">2004-2-1</td>
<td id="id3">1</td>
<td id="id4">90%</td>
<td id="id5">a</td>
</tr>
<tr bgcolor="#FFFFFF">
<td id="id1">不好</td>
<td id="id2">2004-6-1</td>
<td id="id3">2</td>
<td id="id4">88%</td>
<td id="id5">c</td>
</tr>
<tr bgcolor="#FFFFFF">
<td id="id1">很好</td>
<td id="id2">2004-6-1</td>
<td id="id3">2</td>
<td id="id4">88%</td>
<td id="id5">c</td>
</tr>
<tr bgcolor="#FFFFFF">
<td id="id1">很好</td>
<td id="id2">2004-6-1</td>
<td id="id3">2</td>
<td id="id4">90%</td>
<td id="id5">a</td>
</tr>
<tr bgcolor="#FFFFFF">
<td id="id1">很好</td>
<td id="id2">2004-6-1</td>
<td id="id3">2</td>
<td id="id4">90%</td>
<td id="id5">a</td>
</tr>
<tr bgcolor="#FFFFFF">
<td id="id1">很好</td>
<td id="id2">2004-6-1</td>
<td id="id3">2</td>
<td id="id4">90%</td>
<td id="id5">a</td>
</tr>
</table>
<script language="JavaScript">
//[email protected] 表格行合并器
//var textnum = 1;
function coalesce_row(obj,s,n,text){
var text
table = obj;
//alert(s)
for (i=n; i<table.length; i++){
if (table(i).innerHTML == text){
s = s + 1
table(i-1).rowSpan = s
table(i).removeNode(true);
coalesce_row(obj,s,i,table(i-1).innerHTML)
return this;
}else{
s = 1
}
text = table(i).innerHTML
}
}
coalesce_row(document.all.id1,1,0,'null')
//coalesce_row(document.all.id2,1,0,'null')
coalesce_row(document.all.id3,1,0,'null')
coalesce_row(document.all.id4,1,0,'null')
coalesce_row(document.all.id5,1,0,'null')</script>
大家交流学习
菜单拦可拖动
菜单地址 http://www.51zg.com/office/talbenewmenu.htm组成元素 http://www.51zg.com/office/officeelement.htm
工具条 http://www.51zg.com/office/menubar.htm
这个还可以锁定列呀 你仔细看看---------
四楼的链接也可以锁定列,
调整一下窗口大小就可以看到效果。
这里也有一个改变列宽的例子,以咨参考
http://jkisjk.vip.sina.com/html/ChangeColumnWidth.htm