超级强悍的JS表格
2008-09-09 14:15
441 查看
<html>
<head>
<title>表格</title>
<style>
body {
background:#d4d0c8;
scrollbar-3d-light-color:#ffffff;
scrollbar-arrow-color:#002D96;
scrollbar-base-color:#c2cbcf;
}
table {
font-size:9pt;
cursor:default;
table-layout:fixed;
}
tr {
height:15px;
background-color:expression((this.sectionRowIndex%2)?"#ffffff":"#efefef");
}
td {
padding-left:2;
}
#TList {
width:600;
height:350;
margin:40 10 10 70;
overflow:hidden;
border-left:1 solid #666;
border-right:1 solid #666;
border-bottom:1 solid #666;
}
#THead {
background:#efefef;
width:expression(this.parentNode.offsetWidth);
height:22;
margin-top:0;
margin-left:-1;
overflow:hidden;
}
#TBody {
background:#ffffff;
width:expression(this.parentNode.offsetWidth);
height:expression(this.parentNode.offsetHeight-23);
overflow:scroll;
margin-top:0;
margin-left:-1;
}
#Ttitle {
border-right: buttonshadow 1px solid;
border-top: buttonhighlight 1px solid;
border-left: buttonhighlight 1px solid;
border-bottom: buttonshadow 1px solid;
height:21px;
background:#d6d3ce;
width:expression(this.parentNode.offsetWidth);
}
</style>
</head>
<script language="javascript">
function Table() //创建容器
{
var MyTable = document.createElement("div");
document.getElementsByTagName("body")[0].appendChild(MyTable);
MyTable.setAttribute("id" , "TList");
var MyHead = document.createElement("div");
MyTable.appendChild(MyHead);
MyHead.setAttribute("id" , "THead");
var MyBody = document.createElement("div");
MyTable.appendChild(MyBody);
MyBody.setAttribute("id" , "TBody");
MyBody.onscroll = HeadScroll;
MyHead.innerHTML ="<table onselectstart=/"return false/" id=/"MyHeadTab/" border=1 cellpadding=/"0/" cellspacing=/"0/" bordercolordark=/"#FFFFFF/" bordercolorlight=/"#6C6969/"></table>";
MyBody.innerHTML ="<table id=/"MyBodyTab/" border=1 bordercolor=#cccccc style=/"border-collapse:collapse;/" frame=void></table>";
AddCell();
}
function AddCell() //增加列
{
var arg = 1;
if (arguments.length < 1) //增加空列
arg = 0;
for (var i = 0; i < arguments.length; i++) //参数不足
if (arguments[i].length < 1 && arg == 1)
return;
var H = document.getElementById("MyHeadTab");
if (H.rows.length < 1)
{
var Row = H.insertRow();
Row.setAttribute("id" , "Ttitle");
Row.onmousedown = ChangWidth;
Row.onmousemove = ChangCursor;
}
H = H.rows(0);
var B = document.getElementById("MyBodyTab");
var Tcell;
var CellIndex = H.cells.length - 1;
if (arguments[3] != undefined)
if (arguments[3] == -1)
{
if (H.cells[0].innerText != "序号")
return;
for (var i = 0; i < B.rows.length; i++)
B.rows[i].cells(0).innerText = i + 1;
return;
}
else
CellIndex = arguments[3];
if (CellIndex == -1)
Tcell = H.insertCell();
else
Tcell = H.insertCell(CellIndex);
if (arg == 0)
{
Tcell.innerText = " ";
Tcell.style.width = 1500;
}
else
{
Tcell.innerText = arguments[0];
Tcell.style.width = arguments[2];
}
Tcell.oType = arguments[1];
for (var i = 0; i < B.rows.length; i++)
{
var Bcell = B.rows(i).insertCell(CellIndex);
Bcell.style.width = arguments[2];
if (CellIndex == 0)
Bcell.innerHTML = i + 1;
}
}
function AddRow(Text) //增加行
{
if (Text == undefined)
return;
var B = document.getElementById("MyBodyTab");
var len = document.getElementById("MyHeadTab").rows(0).cells;
var Row = B.insertRow();
var Str = Text.split(",");
if (len[0].innerText == "序号")
Str.unshift(Row.sectionRowIndex + 1);
for (var i = 0; i < len.length; i++)
{
var Cell = Row.insertCell();
if (i + 1 != len.length)
{
Cell.innerHTML = Str[i] == undefined ? "" : Str[i];
Cell.style.width = document.getElementById("MyHeadTab").rows(0).cells[i].style.width;
}
}
Row.onmouseover = function() {
if (this.style.background == "#2a63de")
return;
this.style.background = "#3a6ea5";
this.style.color = "#ffffff";
}
Row.onmouseout = function() {
if (this.style.background == "#2a63de")
return;
this.style.background = (this.sectionRowIndex % 2) ? "#ffffff" : "#efefef";
this.style.color = "#000000";
}
Row.onclick = function() {
for (var i = 0; i < document.getElementById("MyBodyTab").rows.length; i++) //可以用折半查找以提高效率
{
/* //此行用于清除列选中
for (var j = 0; j < document.getElementById("MyBodyTab").rows(i).cells.length; j++)
if (document.getElementById("MyBodyTab").rows(i).cells[j].bgColor == "#2a63de")
document.getElementById("MyBodyTab").rows(i).cells[j].bgColor = "";
*/
with(document.getElementById("MyBodyTab").rows(i))
{
if (style.background == "#2a63de")
{
style.background = (i % 2) ? "#ffffff" : "#efefef";
style.color = "#000000";
break;
}
}
}
this.style.background = "#2a63de";
this.style.color = "#ffffff";
}
}
function HeadScroll()
{
document.getElementById("THead").scrollLeft = document.getElementById("TBody").scrollLeft;
}
function ChangWidth()
{
var e = event.srcElement;
if (e == undefined)
return;
if (e.tagName != "TD")
return;
var H = document.getElementById("MyHeadTab");
var B = document.getElementById("MyBodyTab");
var CellIndex;
for (var i = 0; i < H.rows(0).cells.length; i++)
if (H.rows(0).cells[i] == e)
{
CellIndex = i;
break;
}
var l = e.offsetLeft + 70;
if (e.style.cursor == "e-resize") //是改变列宽
{
e.setCapture();
document.onmousemove = function ()
{
if (e == undefined)
return;
e.style.cursor = "e-resize";
var w = event.x + document.getElementById("THead").scrollLeft - l;
if (w >= 5)
{
e.style.width = w;
if (B.rows.length < 1)
return;
B.rows(0).cells[CellIndex].style.width = w;
if(typeof(Y) != "undefined")
clearTimeout(Y);
if (B.rows.length < 50) //防止排序有Bug
Y = setTimeout("ChangWidthx("+ CellIndex +")" , 100);
else
Y = setTimeout("ChangWidthx("+ CellIndex +")" , 800);
}
HeadScroll();
}
document.onmouseup = function ()
{
if (e == undefined)
return;
e.releaseCapture();
e = undefined;
}
}
else
{
//排序
if (event.button == 1)
TdSort(CellIndex);
//SelectCell(CellIndex);
}
}
function ChangWidthx(CellIndex)
{
var B = document.getElementById("MyBodyTab");
var w = document.getElementById("MyHeadTab").rows(0).cells[CellIndex].style.width;
for (var i = 0; i < B.rows.length; i++)
B.rows(i).cells[CellIndex].style.width = w;
B.rows(0).cells[B.rows(0).cells.length-1].style.width = 0;
if (B.offsetWidth < B.parentNode.parentNode.offsetWidth)
B.rows(0).cells[B.rows(0).cells.length-1].style.width = B.parentNode.parentNode.offsetWidth - B.offsetWidth + 20;
HeadScroll();
}
function ChangCursor()
{
var e = event.srcElement;
if (e.tagName != "TD")
return;
var x = event.x + document.getElementById("THead").scrollLeft; //此值在固定表头时要更改
var l = e.offsetLeft + 70;
if (x >= l + e.offsetWidth + 8)
e.style.cursor = "e-resize";
else
e.style.cursor = "default";
}
function TdSort(CellIndex)
{
var Text = "↑";
var S = 1; //向上排
var H = document.getElementById("MyHeadTab");
var This = H.rows(0).cells[CellIndex];
if (This.innerText == "序号" || This.innerText == " ")
return; //没有数据或序号列，不排序
if (This.innerText.indexOf("↑") != -1)
{
Text = "↓";
S = 0;
}
for (var i = 0; i < H.rows(0).cells.length; i++)
{
var Ttitle = H.rows(0).cells[i];
if (Ttitle.innerText.indexOf("↑") != -1 || Ttitle.innerText.indexOf("↓") != -1)
{
Ttitle.innerText = Ttitle.innerText.substring(0 , Ttitle.innerText.length - 2);
break;
}
}
This.innerText += " "+ Text;
TSort(CellIndex , This.oType , S); //开始排序
}
function TSort(CellIndex , oType , Type)
{
var Temp = document.getElementById("MyBodyTab").tBodies[0].rows;
var A = new Array();
for (var i = 0; i < Temp.length; i++)
A[i] = Temp[i];
A.sort(SortSub(CellIndex , oType , Type));
for (var i = 0; i < A.length; i++)
document.getElementById("MyBodyTab").tBodies[0].appendChild(A[i]);
setTimeout("AddCell(/"序号/" , /"Num/" , 40 , -1)" , 1000);
}
function parseStr(s)
{
return String(s).toUpperCase();
}
function parseDate(s)
{
return Date.parse(s.replace(//-/g, '/'));
}
function SortSub(CellIndex , oType , Type)
{
var ThisType = String;
if (oType == "Num")
ThisType = Number;
else if (oType == "Date")
ThisType = parseDate;
else if (oType == "Str")
ThisType = parseStr;
return function (x,y)
{
if (ThisType(x.cells[CellIndex].innerText) > ThisType(y.cells[CellIndex].innerText))
return Type ? 1 : -1;
if (ThisType(x.cells[CellIndex].innerText) < ThisType(y.cells[CellIndex].innerText))
return Type ? -1 : 1;
return 0;
};
}
function window.onload()
{
Table();
AddCell("姓名" , "Text" , 70);
AddCell("年龄" , "Num" , 55);
AddCell("性别" , "Str" , 55);
AddCell("地址" , "Text" , 120);
AddCell("联系电话" , "Text" , 120);
AddCell("E-mail" , "Text" , 120);
AddCell("序号" , "Num" , 40 , 0);
AddCell("身份证号码" , "Text" , 120);
for (var i = 0; i < 30; i++)
AddRow("小刚,"+ (24+i) +",男,传化物流基地,82878566,lzg1215@hotmail.com,41302619821215...");
}
</script>
<body>
</body>
</html>
<head>
<title>表格</title>
<style>
body {
background:#d4d0c8;
scrollbar-3d-light-color:#ffffff;
scrollbar-arrow-color:#002D96;
scrollbar-base-color:#c2cbcf;
}
table {
font-size:9pt;
cursor:default;
table-layout:fixed;
}
tr {
height:15px;
background-color:expression((this.sectionRowIndex%2)?"#ffffff":"#efefef");
}
td {
padding-left:2;
}
#TList {
width:600;
height:350;
margin:40 10 10 70;
overflow:hidden;
border-left:1 solid #666;
border-right:1 solid #666;
border-bottom:1 solid #666;
}
#THead {
background:#efefef;
width:expression(this.parentNode.offsetWidth);
height:22;
margin-top:0;
margin-left:-1;
overflow:hidden;
}
#TBody {
background:#ffffff;
width:expression(this.parentNode.offsetWidth);
height:expression(this.parentNode.offsetHeight-23);
overflow:scroll;
margin-top:0;
margin-left:-1;
}
#Ttitle {
border-right: buttonshadow 1px solid;
border-top: buttonhighlight 1px solid;
border-left: buttonhighlight 1px solid;
border-bottom: buttonshadow 1px solid;
height:21px;
background:#d6d3ce;
width:expression(this.parentNode.offsetWidth);
}
</style>
</head>
<script language="javascript">
function Table() //创建容器
{
var MyTable = document.createElement("div");
document.getElementsByTagName("body")[0].appendChild(MyTable);
MyTable.setAttribute("id" , "TList");
var MyHead = document.createElement("div");
MyTable.appendChild(MyHead);
MyHead.setAttribute("id" , "THead");
var MyBody = document.createElement("div");
MyTable.appendChild(MyBody);
MyBody.setAttribute("id" , "TBody");
MyBody.onscroll = HeadScroll;
MyHead.innerHTML ="<table onselectstart=/"return false/" id=/"MyHeadTab/" border=1 cellpadding=/"0/" cellspacing=/"0/" bordercolordark=/"#FFFFFF/" bordercolorlight=/"#6C6969/"></table>";
MyBody.innerHTML ="<table id=/"MyBodyTab/" border=1 bordercolor=#cccccc style=/"border-collapse:collapse;/" frame=void></table>";
AddCell();
}
function AddCell() //增加列
{
var arg = 1;
if (arguments.length < 1) //增加空列
arg = 0;
for (var i = 0; i < arguments.length; i++) //参数不足
if (arguments[i].length < 1 && arg == 1)
return;
var H = document.getElementById("MyHeadTab");
if (H.rows.length < 1)
{
var Row = H.insertRow();
Row.setAttribute("id" , "Ttitle");
Row.onmousedown = ChangWidth;
Row.onmousemove = ChangCursor;
}
H = H.rows(0);
var B = document.getElementById("MyBodyTab");
var Tcell;
var CellIndex = H.cells.length - 1;
if (arguments[3] != undefined)
if (arguments[3] == -1)
{
if (H.cells[0].innerText != "序号")
return;
for (var i = 0; i < B.rows.length; i++)
B.rows[i].cells(0).innerText = i + 1;
return;
}
else
CellIndex = arguments[3];
if (CellIndex == -1)
Tcell = H.insertCell();
else
Tcell = H.insertCell(CellIndex);
if (arg == 0)
{
Tcell.innerText = " ";
Tcell.style.width = 1500;
}
else
{
Tcell.innerText = arguments[0];
Tcell.style.width = arguments[2];
}
Tcell.oType = arguments[1];
for (var i = 0; i < B.rows.length; i++)
{
var Bcell = B.rows(i).insertCell(CellIndex);
Bcell.style.width = arguments[2];
if (CellIndex == 0)
Bcell.innerHTML = i + 1;
}
}
function AddRow(Text) //增加行
{
if (Text == undefined)
return;
var B = document.getElementById("MyBodyTab");
var len = document.getElementById("MyHeadTab").rows(0).cells;
var Row = B.insertRow();
var Str = Text.split(",");
if (len[0].innerText == "序号")
Str.unshift(Row.sectionRowIndex + 1);
for (var i = 0; i < len.length; i++)
{
var Cell = Row.insertCell();
if (i + 1 != len.length)
{
Cell.innerHTML = Str[i] == undefined ? "" : Str[i];
Cell.style.width = document.getElementById("MyHeadTab").rows(0).cells[i].style.width;
}
}
Row.onmouseover = function() {
if (this.style.background == "#2a63de")
return;
this.style.background = "#3a6ea5";
this.style.color = "#ffffff";
}
Row.onmouseout = function() {
if (this.style.background == "#2a63de")
return;
this.style.background = (this.sectionRowIndex % 2) ? "#ffffff" : "#efefef";
this.style.color = "#000000";
}
Row.onclick = function() {
for (var i = 0; i < document.getElementById("MyBodyTab").rows.length; i++) //可以用折半查找以提高效率
{
/* //此行用于清除列选中
for (var j = 0; j < document.getElementById("MyBodyTab").rows(i).cells.length; j++)
if (document.getElementById("MyBodyTab").rows(i).cells[j].bgColor == "#2a63de")
document.getElementById("MyBodyTab").rows(i).cells[j].bgColor = "";
*/
with(document.getElementById("MyBodyTab").rows(i))
{
if (style.background == "#2a63de")
{
style.background = (i % 2) ? "#ffffff" : "#efefef";
style.color = "#000000";
break;
}
}
}
this.style.background = "#2a63de";
this.style.color = "#ffffff";
}
}
function HeadScroll()
{
document.getElementById("THead").scrollLeft = document.getElementById("TBody").scrollLeft;
}
function ChangWidth()
{
var e = event.srcElement;
if (e == undefined)
return;
if (e.tagName != "TD")
return;
var H = document.getElementById("MyHeadTab");
var B = document.getElementById("MyBodyTab");
var CellIndex;
for (var i = 0; i < H.rows(0).cells.length; i++)
if (H.rows(0).cells[i] == e)
{
CellIndex = i;
break;
}
var l = e.offsetLeft + 70;
if (e.style.cursor == "e-resize") //是改变列宽
{
e.setCapture();
document.onmousemove = function ()
{
if (e == undefined)
return;
e.style.cursor = "e-resize";
var w = event.x + document.getElementById("THead").scrollLeft - l;
if (w >= 5)
{
e.style.width = w;
if (B.rows.length < 1)
return;
B.rows(0).cells[CellIndex].style.width = w;
if(typeof(Y) != "undefined")
clearTimeout(Y);
if (B.rows.length < 50) //防止排序有Bug
Y = setTimeout("ChangWidthx("+ CellIndex +")" , 100);
else
Y = setTimeout("ChangWidthx("+ CellIndex +")" , 800);
}
HeadScroll();
}
document.onmouseup = function ()
{
if (e == undefined)
return;
e.releaseCapture();
e = undefined;
}
}
else
{
//排序
if (event.button == 1)
TdSort(CellIndex);
//SelectCell(CellIndex);
}
}
function ChangWidthx(CellIndex)
{
var B = document.getElementById("MyBodyTab");
var w = document.getElementById("MyHeadTab").rows(0).cells[CellIndex].style.width;
for (var i = 0; i < B.rows.length; i++)
B.rows(i).cells[CellIndex].style.width = w;
B.rows(0).cells[B.rows(0).cells.length-1].style.width = 0;
if (B.offsetWidth < B.parentNode.parentNode.offsetWidth)
B.rows(0).cells[B.rows(0).cells.length-1].style.width = B.parentNode.parentNode.offsetWidth - B.offsetWidth + 20;
HeadScroll();
}
function ChangCursor()
{
var e = event.srcElement;
if (e.tagName != "TD")
return;
var x = event.x + document.getElementById("THead").scrollLeft; //此值在固定表头时要更改
var l = e.offsetLeft + 70;
if (x >= l + e.offsetWidth + 8)
e.style.cursor = "e-resize";
else
e.style.cursor = "default";
}
function TdSort(CellIndex)
{
var Text = "↑";
var S = 1; //向上排
var H = document.getElementById("MyHeadTab");
var This = H.rows(0).cells[CellIndex];
if (This.innerText == "序号" || This.innerText == " ")
return; //没有数据或序号列，不排序
if (This.innerText.indexOf("↑") != -1)
{
Text = "↓";
S = 0;
}
for (var i = 0; i < H.rows(0).cells.length; i++)
{
var Ttitle = H.rows(0).cells[i];
if (Ttitle.innerText.indexOf("↑") != -1 || Ttitle.innerText.indexOf("↓") != -1)
{
Ttitle.innerText = Ttitle.innerText.substring(0 , Ttitle.innerText.length - 2);
break;
}
}
This.innerText += " "+ Text;
TSort(CellIndex , This.oType , S); //开始排序
}
function TSort(CellIndex , oType , Type)
{
var Temp = document.getElementById("MyBodyTab").tBodies[0].rows;
var A = new Array();
for (var i = 0; i < Temp.length; i++)
A[i] = Temp[i];
A.sort(SortSub(CellIndex , oType , Type));
for (var i = 0; i < A.length; i++)
document.getElementById("MyBodyTab").tBodies[0].appendChild(A[i]);
setTimeout("AddCell(/"序号/" , /"Num/" , 40 , -1)" , 1000);
}
function parseStr(s)
{
return String(s).toUpperCase();
}
function parseDate(s)
{
return Date.parse(s.replace(//-/g, '/'));
}
function SortSub(CellIndex , oType , Type)
{
var ThisType = String;
if (oType == "Num")
ThisType = Number;
else if (oType == "Date")
ThisType = parseDate;
else if (oType == "Str")
ThisType = parseStr;
return function (x,y)
{
if (ThisType(x.cells[CellIndex].innerText) > ThisType(y.cells[CellIndex].innerText))
return Type ? 1 : -1;
if (ThisType(x.cells[CellIndex].innerText) < ThisType(y.cells[CellIndex].innerText))
return Type ? -1 : 1;
return 0;
};
}
function window.onload()
{
Table();
AddCell("姓名" , "Text" , 70);
AddCell("年龄" , "Num" , 55);
AddCell("性别" , "Str" , 55);
AddCell("地址" , "Text" , 120);
AddCell("联系电话" , "Text" , 120);
AddCell("E-mail" , "Text" , 120);
AddCell("序号" , "Num" , 40 , 0);
AddCell("身份证号码" , "Text" , 120);
for (var i = 0; i < 30; i++)
AddRow("小刚,"+ (24+i) +",男,传化物流基地,82878566,lzg1215@hotmail.com,41302619821215...");
}
</script>
<body>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js验证表单大全，超级的强悍的javascript代码(转载)
- csv表格处理（下）－－纯JS解析导入csv
- 超级表格企业版：服务上万家中小企业，提升效率
- JS——DOM表格
- js 对表格进行各种操作
- javaspript基础，表格排序和js拖动
- 超级表格上线消息提醒功能了~
- [JS&Jquery]实现页面表格中相同内容的行或列合并
- 网站开发进阶(二十五)js如何将html表格导出为excel文件
- 这些人都在使用超级表格
- JS实现的流动边框效果的表格特效z
- 定单管理上 JS表格排序第1/2页
- 高效的表格行背景隔行变色及选定高亮的JS代码
- 超级表格企业版特邀用户免费体验。
- 使用js改变表格行的背景色
- js对Table表格的操作
- js表格字段排序
- js计算表格的值(例如购物车中)
- js-match,replace-强悍
- JS表格分页组件：fupage的设计思路和具体用法(未来考虑开源,争取在2015年）