记得PowerTable是分大小写的.POWERTABLE.JS的文件代码如下:<script language="JavaScript1.2"> /* This following code are designed and writen by Windy_sk <[email protected]> You can use it freely, but u must held all the copyright items! */var Main_Tab = null; var cur_row = null; var cur_col = null; var cur_cell = null; var Org_con = ""; var sort_col = null;var show_col = false; var charMode = true; var act_bgc = "#BEC5DE"; var act_fc = "black"; var cur_bgc = "#ccffcc"; var cur_fc = "black";function init(){ cur_row = null; cur_col = null; cur_cell = null; sort_col = null; Main_Tab = PowerTable; read_def(Main_Tab) Main_Tab.onmouseover = overIt; Main_Tab.onmouseout = outIt; Main_Tab.onclick = clickIt; //Main_Tab.ondblclick = dblclickIt; Org_con = Main_Tab.outerHTML;
<!--#include file="powertable.js"-->
最后在需要排序的表格中写上加上"ID='PowerTable'"就行.
如:
<talbe border=0 width="100%" id="PowerTable">
<tr><td>name</td><td>age</td><td>sex</td><td>date</td><td>telephone</td></tr>
<tr><td>david</td><td>20</td><td>F</td><td>2004-10-3</td><td>5666</td></tr>
<tr><td>anna</td><td>21</td><td>M</td><td>2004-10-13</td><td>566</td></tr>
<tr><td>beverly</td><td>23</td><td>F</td><td>2004-12-23</td><td>5666</td></tr>
<tr><td>crytal</td><td>23</td><td>M</td><td>2004-11-10</td><td>66</td></tr>
<tr><td>yk</td><td>24</td><td>F</td><td>2004-12-13</td><td>566</td></tr>
</table>
/*
This following code are designed and writen by Windy_sk <[email protected]>
You can use it freely, but u must held all the copyright items!
*/var Main_Tab = null;
var cur_row = null;
var cur_col = null;
var cur_cell = null;
var Org_con = "";
var sort_col = null;var show_col = false;
var charMode = true;
var act_bgc = "#BEC5DE";
var act_fc = "black";
var cur_bgc = "#ccffcc";
var cur_fc = "black";function init(){
cur_row = null;
cur_col = null;
cur_cell = null;
sort_col = null;
Main_Tab = PowerTable;
read_def(Main_Tab)
Main_Tab.onmouseover = overIt;
Main_Tab.onmouseout = outIt;
Main_Tab.onclick = clickIt;
//Main_Tab.ondblclick = dblclickIt;
Org_con = Main_Tab.outerHTML;
arrowUp = document.createElement("SPAN");
arrowUp.innerHTML = "5";
arrowUp.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px"; arrowDown = document.createElement("SPAN");
arrowDown.innerHTML = "6";
arrowDown.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP: -3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 10px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY: webdings; HEIGHT: 11px";
}function window.onload(){
init();
drag = document.createElement("DIV");
drag.innerHTML = "";
drag.style.textAlign = "center";
drag.style.position = "absolute";
drag.style.cursor = "hand";
drag.style.border = "1 solid black";
drag.style.display = "none";
drag.style.zIndex = "999";
document.body.insertBefore(drag);
//setInterval("judge_move()",100);
//setInterval("showContent.value=Main_Tab.innerHTML;monitor.value='cur_row: '+cur_row+'; cur_col: '+cur_col + '; sort_col: ' +sort_col",1000);
}function judge_move(){
//move[0].disabled=(cur_row == null || cur_row<=1);
//move[1].disabled=(cur_row == null || cur_row==Main_Tab.rows.length-1 || cur_row == 0);
//move[2].disabled=(cur_col == null || cur_col==0);
//move[3].disabled=(cur_col == null || cur_col==Main_Tab.rows[0].cells.length-1);
}document.onmouseup = drag_end;function clear_color(){
the_table=Main_Tab;
if(cur_col!=null){
for(i=0;i<the_table.rows.length;i++){
with(the_table.rows[i].cells[cur_col]){
style.backgroundColor=oBgc;
style.color=oFc;
}
}
}
if(cur_row!=null){
for(i=0;i<the_table.rows[cur_row].cells.length;i++){
with(the_table.rows[cur_row].cells[i]){
style.backgroundColor=oBgc;
style.color=oFc;
}
}
}
if(cur_cell!=null){
cur_cell.children[0].contentEditable = false;
with(cur_cell.children[0].runtimeStyle){
borderLeft=borderTop="";
borderRight=borderBottom="";
backgroundColor="";
paddingLeft="";
textAlign="";
}
}
}
window.status = "";
clear_color();
cur_row = null;
cur_col = null;
cur_cell = null;
}function read_def(the_table){
for(var i=0;i<the_table.rows.length;i++){
for(var j=0;j<the_table.rows[i].cells.length;j++){
with(the_table.rows[i]){
cells[j].oBgc = cells[j].currentStyle.backgroundColor;
cells[j].oFc = cells[j].currentStyle.color;
if(i==0){
//cells[j].onmousedown = drag_start;
//cells[j].onmouseup = drag_end;
}
}
}
}
}function get_Element(the_ele,the_tag){
the_tag = the_tag.toLowerCase();
if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
while(the_ele=the_ele.offsetParent){
if(the_ele.tagName.toLowerCase()==the_tag)return the_ele;
}
return(null);
}var dragStart = false;
var dragColStart = null;
var dragColEnd = null;function drag_start(){
var the_td = get_Element(event.srcElement,"td");
if(the_td==null) return;
dragStart = true;
dragColStart = the_td.cellIndex;
drag.style.width = the_td.offsetWidth;
drag.style.height = the_td.offsetHeight;
function document.onmousemove(){
drag.style.display = "";
drag.style.top = event.y - drag.offsetHeight/2;
drag.style.left = event.x - drag.offsetWidth/2;
for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
with(Main_Tab.rows[0].cells[i]){
if((event.y>offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<offsetTop+offsetHeight+parseInt(document.body.currentStyle.marginTop)) && (event.x>offsetLeft+parseInt(document.body.currentStyle.marginLeft) && event.x<offsetLeft+offsetWidth+parseInt(document.body.currentStyle.marginLeft))){
runtimeStyle.backgroundColor=act_bgc;
dragColEnd=cellIndex;
}else{
runtimeStyle.backgroundColor="";
}
}
}
if(!(event.y>Main_Tab.rows[0].offsetTop+parseInt(document.body.currentStyle.marginTop) && event.y<Main_Tab.rows[0].offsetTop+Main_Tab.rows[0].offsetHeight+parseInt(document.body.currentStyle.marginTop))) dragColEnd=null;
}
drag.innerHTML = the_td.innerHTML;
drag.style.backgroundColor = the_td.oBgc;
drag.style.color = the_td.oFc;
}function drag_end(){
dragStart = false;
drag.style.display="none";
drag.innerHTML = "";
drag.style.width = 0;
drag.style.height = 0;
for(var i=0;i<Main_Tab.rows[0].cells.length;i++){
Main_Tab.rows[0].cells[i].runtimeStyle.backgroundColor="";
}
if(dragColStart!=null && dragColEnd!=null && dragColStart!=dragColEnd){
change_col(Main_Tab,dragColStart,dragColEnd);
if(dragColStart==sort_col)sort_col=dragColEnd;
else if(dragColEnd==sort_col)sort_col=dragColStart;
document.onclick();
}
dragColStart = null;
dragColEnd = null;
document.onmousemove=null;
}
帮帮忙吧