可编辑的表格，使用htc实现
tableAct.htc
+展开
-HTML
<public:event name="onrowselect" ID=rowSelect />
<public:property name="hlColor" />
<public:property name="slColor" />
<public:property name='dragColor' />
<public:property name="Editable"/>
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
<public:attach event=oncontentready onevent="init();" />
<script language=jscript>
var orColor;
var currRow = -1;
var selRow = -1;
var selRows=new Array();
if (element.tagName == 'TABLE')
{
element.attachEvent('onmouseover', onMouseOver);
element.attachEvent('onmouseout', onMouseOut);
element.attachEvent('onclick', onClick);
}
else
{
alert("请在TABLE上使用此htc")
}
function cleanup()
{
hilite(-1);
element.detachEvent('onmouseover', onMouseOver);
element.detachEvent('onmouseout', onMouseOut);
element.detachEvent('onclick', onClick);
}
function AddRow(){
var oTR;
var oTD;
oTR=tbody.insertRow(getMinSelRow());
for(i=0;i
oTD.innerHTML="<div contentEditable=false> </DIV>";
oTD.children[0].attachEvent("ondblclick",EditTD);
oTD.children[0].attachEvent("onblur",editDisable);
}
}
function DelRow(){
if(selRow==-1) {alert("no selected rows to delete");return;}
for (i=0;i
oTR=tbody.deleteRow(selRows[i].rowIndex-1);
}
selRow=-1;
}
function getMinSelRow(){
var trMin=10000;
var oTR;
for(i=0;iif (selRows[i].rowIndex
return trMin;
}
function EditTD(){
var oe=window.event.srcElement;
if(Editable!="true") return;
oe.contentEditable=true;
oe.runtimeStyle.backgroundColor="#FFFFFF";
}
function editDisable(){
var oe=window.event.srcElement;
if(Editable!="true") return;
oe.contentEditable=false;
oe.runtimeStyle.backgroundColor="";
}
function onClick()
{
srcElem = window.event.srcElement;
//crawl up the tree to find the table row
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if(srcElem.rowIndex == 0 ) return;
if(srcElem.parentElement.tagName=="TFOOT") return;
if(selRow!=-1){
if(event.ctrlKey){
if(srcElem.style.backgroundColor == slColor) delSelItem(srcElem)
else addSelItem(srcElem);
}
else{
if(event.shiftKey) selectBetween(srcElem)
else{
clearSelItems(srcElem);
addSelItem(srcElem);
}
}
}
else{
addSelItem(srcElem);
}
showSelStatus();
var oEvent = createEventObject();
oEvent.selected = srcElem;
rowSelect.fire(oEvent);
}
function selectBetween(){
var cRows=srcElem.parentElement.rows;
var trMin=10000;
var trMax=0;
for(i=0;iif (selRows[i].rowIndex
clearSelItems(srcElem);
for(i=trMin-1;i
}
}
function addSelItem(oItem){
oItem.style.backgroundColor = slColor;
selRow++;
selRows[selRow]=oItem;
}
function delSelItem(oItem){
var obj;
oItem.style.backgroundColor = orColor;
for(i=0;i
}
selRow--;
}
function clearSelItems(otr){
var oRows=otr.parentElement.rows;//彻底清除
for (i=0;i
}
selRow=-1;
}
function showSelStatus(){
var sInfo="selected:";
for(i=0;i
tableStatus.innerText=sInfo;
}
function onMouseOver()
{
srcElem = window.event.srcElement;
//crawl up to find the row
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if(srcElem.parentElement.tagName!="TBODY") return;
if (srcElem.rowIndex > 0)
hilite(srcElem);
else
hilite(-1);
}
function onMouseOut()
{
// Make sure we catch exit from the table
hilite(-1, -1);
}
function hilite(newRow)
{
if (hlColor != null )
{
if (currRow != -1 )
{
currRow.runtimeStyle.backgroundColor = '';
}
if (newRow != -1)
{
newRow.runtimeStyle.backgroundColor = hlColor;
}
}
currRow = newRow;
}
/// sort
//
// global variables
//
var tbody=null;
var theadrow=null;
var colCount = null;
var reverse = false;
var lastclick = -1; // stores the object of our last used object
var arrHitTest = new Array();
var bDragMode = false;
var objDragItem;
var arrHitTest = new Array();
var iArrayHit = false;
function init() {
tfoot=element.tFoot;
if (tfoot){
tfoot=element.tFoot.children[0].children[0];//get tfoot TD
for(i=0;i
if(tfoot.children[i].Action== "DelRow") tfoot.children[i].attachEvent("onclick",DelRow);
}
}
orColor=element.style.backgroundColor;
// get TBODY - take the first TBODY for the table to sort
tbody = element.tBodies(0);
if (!tbody) return;
//Get THEAD
var thead = element.tHead;
if (!thead) return;
theadrow = thead.children[0]; //Assume just one Head row
if (theadrow.tagName != "TR") return;
theadrow.runtimeStyle.cursor = "hand";
colCount = theadrow.children.length;
var l, clickCell;
var cx=0;
var cy=0;
var c;
for (var i=0; i
// Create our blank gif
l=document.createElement("IMG");
l.src="vnblank.gif";
l.id="srtImg";
l.width=13;
l.height=11;
clickCell = theadrow.children[i];
clickCell.selectIndex = i;
clickCell.insertAdjacentElement("beforeEnd", l)
clickCell.attachEvent("onclick", doClick);
arrHitTest[i] = new Array();
c = clickCell.offsetParent;
if(cx == 0 && cy == 0 )
{
while (c.offsetParent != null) {
cy += c.offsetTop;
cx += c.offsetLeft;
c = c.offsetParent;
}
}
arrHitTest[i][0] = cx + clickCell.offsetLeft;
arrHitTest[i][1] = cy + clickCell.offsetTop;
arrHitTest[i][2] = clickCell;
arrHitTest[i][3] = cx + clickCell.offsetLeft + eval(clickCell.width);
clickCell.attachEvent("onmousedown",onMouseDown);
}
defaultTitleColor = theadrow.children[0].currentStyle.backgroundColor;
element.document.attachEvent("onmousemove",onMouseMove);
element.document.attachEvent("onmouseup",onMouseUp);
element.document.attachEvent("onselectstart",onSelect);
//make the Table editable
var sstr;
if (Editable=="true") {
for(i=0;i
sstr=tbody.children[i].children[j].innerText;
tbody.children[i].children[j].innerHTML="<div contentEditable=false>"+sstr+"</DIV>";
tbody.children[i].children[j].children[0].attachEvent("ondblclick",EditTD);
tbody.children[i].children[j].children[0].attachEvent("onblur",editDisable);
}
}
}
//
// doClick handler
//
//
function doClick(e)
{
var clickObject = e.srcElement;
while (clickObject.tagName != "TD")
{
clickObject = clickObject.parentElement;
}
// clear the sort images in the head
var imgcol= theadrow.all('srtimg');
for(var x = 0; x < imgcol.length; x++)
imgcol[x].src = "vnblank.gif";
if(lastclick == clickObject.selectIndex)
{
if(reverse == false)
{
clickObject.children[0].src = "vndown.gif";
reverse = true;
}
else
{
clickObject.children[0].src = "vnup.gif";
reverse = false;
}
}
else
{
reverse = false;
lastclick = clickObject.selectIndex;
clickObject.children[0].src = "vnup.gif";
}
insertionSort(tbody, tbody.rows.length-1, reverse, clickObject.selectIndex);
}
function insertionSort(t, iRowEnd, fReverse, iColumn)
{
var iRowInsertRow, iRowWalkRow, current, insert;
for ( iRowInsert = 0 + 1 ; iRowInsert <= iRowEnd ; iRowInsert++ )
{
if (iColumn) {
if( typeof(t.children[iRowInsert].children[iColumn]) != "undefined")
textRowInsert = t.children[iRowInsert].children[iColumn].innerText;
else
textRowInsert = "";
} else {
textRowInsert = t.children[iRowInsert].innerText;
}
for ( iRowWalk = 0; iRowWalk <= iRowInsert ; iRowWalk++ )
{
if (iColumn) {
if(typeof(t.children[iRowWalk].children[iColumn]) != "undefined")
textRowCurrent = t.children[iRowWalk].children[iColumn].innerText;
else
textRowCurrent = "";
} else {
textRowCurrent = t.children[iRowWalk].innerText;
}
//
// We save our values so we can manipulate the numbers for
// comparison
//
current = textRowCurrent;
insert = textRowInsert;
// If the value is not a number, we sort normally, else we evaluate
// the value to get a numeric representation
//
if ( !isNaN(current) && !isNaN(insert)) //fix a bug by VN 2002.6.18
{
current= eval(current);
insert= eval(insert);
}
else
{
current = current.toLowerCase();
insert = insert.toLowerCase();
}
if ( ( (!fReverse && insert < current)
|| ( fReverse && insert > current) )
&& (iRowInsert != iRowWalk) )
{
eRowInsert = t.children[iRowInsert];
eRowWalk = t.children[iRowWalk];
t.insertBefore(eRowInsert, eRowWalk);
iRowWalk = iRowInsert; // done
}
}
}
}
/// Drag
function InitHeader()
{
var cx=0;
var cy=0;
var c;
for (i=0; i
var clickCell = theadrow.children[i];
clickCell.selectIndex = i;
c = clickCell.offsetParent;
if(cx == 0 && cy == 0 )
{
while (c.offsetParent != null) {
cy += c.offsetTop;
cx += c.offsetLeft;
c = c.offsetParent;
}
}
arrHitTest[i][0] = cx + clickCell.offsetLeft;
arrHitTest[i][1] = cy + clickCell.offsetTop;
arrHitTest[i][2] = clickCell;
arrHitTest[i][3] = cx + clickCell.offsetLeft + eval(clickCell.width);
}
}
function onSelect()
{
//disable selection
return false;
}
function ChangeHeader(iChange)
{
for(var y = 0; y < arrHitTest.length; y++)
{
if (arrHitTest[y][2].currentStyle.backgroundColor == dragColor)
arrHitTest[y][2].style.backgroundColor = defaultTitleColor;
}
if(iChange == "-1") return;
arrHitTest[iChange][2].style.backgroundColor = dragColor;
}
function onMouseUp(e)
{
if(!bDragMode) return;
bDragMode = false;
var iSelected = objDragItem.selectIndex;
objDragItem.removeNode(true);
objDragItem = null;
ChangeHeader(-1);
if( (iArrayHit - 1) < 0 || iSelected < 0) return; // default faliure
CopyRow(iSelected, (iArrayHit - 1) );
// Reset our variables
iSelected = 0;
iArrayHit = -1;
}
function onMouseDown(e)
{
bDragMode = true;
var src = e.srcElement;
var c = e.srcElement;
while (src.tagName != "TD")
src = src.parentElement;
// Create our header on the fly
objDragItem = document.createElement("DIV");
objDragItem.innerHTML = src.innerHTML;
objDragItem.style.height = src.currentStyle.height;
objDragItem.style.width = src.currentStyle.width;
objDragItem.style.background = src.currentStyle.backgroundColor;
objDragItem.style.fontColor = src.currentStyle.fontColor;
objDragItem.style.position = "absolute";
objDragItem.selectIndex = src.selectIndex;
while (c.offsetParent != null)
{
objDragItem.style.y += c.offsetTop;
objDragItem.style.x += c.offsetLeft;
c = c.offsetParent;
}
objDragItem.style.borderStyle = "outset";
objDragItem.style.display = "none";
src.insertBefore(objDragItem);
}
function onMouseMove(e)
{
if(!bDragMode || !objDragItem) return; // If we aren't dragging or our object
// is null, we return
if(event.button!=1) onMouseUp(event);
// Hardcoded value for height difference
var midWObj = objDragItem.style.posWidth / 2;
var midHObj = 12;
// Save mouse's position in the document
var intTop = e.clientY + element.document.body.scrollTop;
var intLeft = e.clientX + element.document.body.scrollLeft;
var cx=0,cy=0;
var elCurrent = objDragItem.offsetParent;
while (elCurrent.offsetParent != null) {
cx += elCurrent.offsetTop;
cy += elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
objDragItem.style.pixelTop = intTop - cx - midHObj;
objDragItem.style.pixelLeft = intLeft - cy - midWObj;
if(objDragItem.style.display == "none") objDragItem.style.display = "";
iArrayHit = CheckHit(intTop , intLeft , e);
e.cancelBubble = false;
e.returnValue = false;
}
function CheckHit(x,y,e)
{
midWObj = objDragItem.style.posWidth / 2;
midHObj = 12;
if( ((x) > (arrHitTest[0][1] + 20) ) || ( (x) < (arrHitTest[0][1]) ) )
{
ChangeHeader(-1);
return -1;
}
for(var i=0; i < colCount; i++)
{
if( (y) > (arrHitTest[i][0]) && (y) < (arrHitTest[i][3] )) //+ 100))
{
ChangeHeader(i);
return i + 1;
}
}
return -1;
}
//
// Copy from row to row.. Does the Header also.
//
function CopyRow(from, to)
{
if(from == to) return;
var origfrom = from;
var origto = to;
var iDiff = 0;
if( from > to )
{
iDiff = from - to;
var saveObj = theadrow.children[from].innerHTML;
var saveWidth = theadrow.children[from].width;
for(var i = 0 ; i < iDiff; i++)
{
theadrow.children[from].innerHTML = theadrow.children[from - 1].innerHTML;
theadrow.children[from].width = theadrow.children[from - 1].width;
from--;
}
theadrow.children[to].innerHTML = saveObj;
theadrow.children[to].width = saveWidth;
}
else
{
iDiff = to - from;
var saveObj = theadrow.children[from].innerHTML;
var saveWidth = theadrow.children[from].width;
for(var i = 0 ; i < iDiff; i++)
{
theadrow.children[from].innerHTML = theadrow.children[from + 1].innerHTML;
theadrow.children[from].width = theadrow.children[from + 1].width;
from++;
}
theadrow.children[to].innerHTML = saveObj;
theadrow.children[to].width = saveWidth;
}
for(var i = 0 ; i < theadrow.children.length; i++)
theadrow.children[i].selectIndex = i;
InitHeader();
for ( var iRowInsert = 0 ; iRowInsert < tbody.rows.length; iRowInsert++ )
{
from = origfrom;
to = origto;
if( from > to )
{
iDiff = from - to;
var saveObj = tbody.children[iRowInsert].children[from].innerHTML
for(var i = 0 ; i < iDiff; i++)
{
tbody.children[iRowInsert].children[from].innerHTML = tbody.children[iRowInsert].children[from - 1].innerHTML;
from--;
}
tbody.children[iRowInsert].children[to].innerHTML = saveObj;
}
else
{
iDiff = to - from;
var saveObj = tbody.children[iRowInsert].children[from].innerHTML
for(var i = 0 ; i < iDiff; i++)
{
tbody.children[iRowInsert].children[from].innerHTML = tbody.children[iRowInsert].children[from + 1].innerHTML;
from++;
}
tbody.children[iRowInsert].children[to].innerHTML = saveObj;
}
}
}
</script>
<public:property name="hlColor" />
<public:property name="slColor" />
<public:property name='dragColor' />
<public:property name="Editable"/>
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
<public:attach event=oncontentready onevent="init();" />
<script language=jscript>
var orColor;
var currRow = -1;
var selRow = -1;
var selRows=new Array();
if (element.tagName == 'TABLE')
{
element.attachEvent('onmouseover', onMouseOver);
element.attachEvent('onmouseout', onMouseOut);
element.attachEvent('onclick', onClick);
}
else
{
alert("请在TABLE上使用此htc")
}
function cleanup()
{
hilite(-1);
element.detachEvent('onmouseover', onMouseOver);
element.detachEvent('onmouseout', onMouseOut);
element.detachEvent('onclick', onClick);
}
function AddRow(){
var oTR;
var oTD;
oTR=tbody.insertRow(getMinSelRow());
for(i=0;i
oTD.innerHTML="<div contentEditable=false> </DIV>";
oTD.children[0].attachEvent("ondblclick",EditTD);
oTD.children[0].attachEvent("onblur",editDisable);
}
}
function DelRow(){
if(selRow==-1) {alert("no selected rows to delete");return;}
for (i=0;i
oTR=tbody.deleteRow(selRows[i].rowIndex-1);
}
selRow=-1;
}
function getMinSelRow(){
var trMin=10000;
var oTR;
for(i=0;i
return trMin;
}
function EditTD(){
var oe=window.event.srcElement;
if(Editable!="true") return;
oe.contentEditable=true;
oe.runtimeStyle.backgroundColor="#FFFFFF";
}
function editDisable(){
var oe=window.event.srcElement;
if(Editable!="true") return;
oe.contentEditable=false;
oe.runtimeStyle.backgroundColor="";
}
function onClick()
{
srcElem = window.event.srcElement;
//crawl up the tree to find the table row
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if(srcElem.rowIndex == 0 ) return;
if(srcElem.parentElement.tagName=="TFOOT") return;
if(selRow!=-1){
if(event.ctrlKey){
if(srcElem.style.backgroundColor == slColor) delSelItem(srcElem)
else addSelItem(srcElem);
}
else{
if(event.shiftKey) selectBetween(srcElem)
else{
clearSelItems(srcElem);
addSelItem(srcElem);
}
}
}
else{
addSelItem(srcElem);
}
showSelStatus();
var oEvent = createEventObject();
oEvent.selected = srcElem;
rowSelect.fire(oEvent);
}
function selectBetween(){
var cRows=srcElem.parentElement.rows;
var trMin=10000;
var trMax=0;
for(i=0;i
clearSelItems(srcElem);
for(i=trMin-1;i
}
}
function addSelItem(oItem){
oItem.style.backgroundColor = slColor;
selRow++;
selRows[selRow]=oItem;
}
function delSelItem(oItem){
var obj;
oItem.style.backgroundColor = orColor;
for(i=0;i
}
selRow--;
}
function clearSelItems(otr){
var oRows=otr.parentElement.rows;//彻底清除
for (i=0;i
}
selRow=-1;
}
function showSelStatus(){
var sInfo="selected:";
for(i=0;i
tableStatus.innerText=sInfo;
}
function onMouseOver()
{
srcElem = window.event.srcElement;
//crawl up to find the row
while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
srcElem = srcElem.parentElement;
if(srcElem.tagName != "TR") return;
if(srcElem.parentElement.tagName!="TBODY") return;
if (srcElem.rowIndex > 0)
hilite(srcElem);
else
hilite(-1);
}
function onMouseOut()
{
// Make sure we catch exit from the table
hilite(-1, -1);
}
function hilite(newRow)
{
if (hlColor != null )
{
if (currRow != -1 )
{
currRow.runtimeStyle.backgroundColor = '';
}
if (newRow != -1)
{
newRow.runtimeStyle.backgroundColor = hlColor;
}
}
currRow = newRow;
}
/// sort
//
// global variables
//
var tbody=null;
var theadrow=null;
var colCount = null;
var reverse = false;
var lastclick = -1; // stores the object of our last used object
var arrHitTest = new Array();
var bDragMode = false;
var objDragItem;
var arrHitTest = new Array();
var iArrayHit = false;
function init() {
tfoot=element.tFoot;
if (tfoot){
tfoot=element.tFoot.children[0].children[0];//get tfoot TD
for(i=0;i
if(tfoot.children[i].Action== "DelRow") tfoot.children[i].attachEvent("onclick",DelRow);
}
}
orColor=element.style.backgroundColor;
// get TBODY - take the first TBODY for the table to sort
tbody = element.tBodies(0);
if (!tbody) return;
//Get THEAD
var thead = element.tHead;
if (!thead) return;
theadrow = thead.children[0]; //Assume just one Head row
if (theadrow.tagName != "TR") return;
theadrow.runtimeStyle.cursor = "hand";
colCount = theadrow.children.length;
var l, clickCell;
var cx=0;
var cy=0;
var c;
for (var i=0; i
// Create our blank gif
l=document.createElement("IMG");
l.src="vnblank.gif";
l.id="srtImg";
l.width=13;
l.height=11;
clickCell = theadrow.children[i];
clickCell.selectIndex = i;
clickCell.insertAdjacentElement("beforeEnd", l)
clickCell.attachEvent("onclick", doClick);
arrHitTest[i] = new Array();
c = clickCell.offsetParent;
if(cx == 0 && cy == 0 )
{
while (c.offsetParent != null) {
cy += c.offsetTop;
cx += c.offsetLeft;
c = c.offsetParent;
}
}
arrHitTest[i][0] = cx + clickCell.offsetLeft;
arrHitTest[i][1] = cy + clickCell.offsetTop;
arrHitTest[i][2] = clickCell;
arrHitTest[i][3] = cx + clickCell.offsetLeft + eval(clickCell.width);
clickCell.attachEvent("onmousedown",onMouseDown);
}
defaultTitleColor = theadrow.children[0].currentStyle.backgroundColor;
element.document.attachEvent("onmousemove",onMouseMove);
element.document.attachEvent("onmouseup",onMouseUp);
element.document.attachEvent("onselectstart",onSelect);
//make the Table editable
var sstr;
if (Editable=="true") {
for(i=0;i
sstr=tbody.children[i].children[j].innerText;
tbody.children[i].children[j].innerHTML="<div contentEditable=false>"+sstr+"</DIV>";
tbody.children[i].children[j].children[0].attachEvent("ondblclick",EditTD);
tbody.children[i].children[j].children[0].attachEvent("onblur",editDisable);
}
}
}
//
// doClick handler
//
//
function doClick(e)
{
var clickObject = e.srcElement;
while (clickObject.tagName != "TD")
{
clickObject = clickObject.parentElement;
}
// clear the sort images in the head
var imgcol= theadrow.all('srtimg');
for(var x = 0; x < imgcol.length; x++)
imgcol[x].src = "vnblank.gif";
if(lastclick == clickObject.selectIndex)
{
if(reverse == false)
{
clickObject.children[0].src = "vndown.gif";
reverse = true;
}
else
{
clickObject.children[0].src = "vnup.gif";
reverse = false;
}
}
else
{
reverse = false;
lastclick = clickObject.selectIndex;
clickObject.children[0].src = "vnup.gif";
}
insertionSort(tbody, tbody.rows.length-1, reverse, clickObject.selectIndex);
}
function insertionSort(t, iRowEnd, fReverse, iColumn)
{
var iRowInsertRow, iRowWalkRow, current, insert;
for ( iRowInsert = 0 + 1 ; iRowInsert <= iRowEnd ; iRowInsert++ )
{
if (iColumn) {
if( typeof(t.children[iRowInsert].children[iColumn]) != "undefined")
textRowInsert = t.children[iRowInsert].children[iColumn].innerText;
else
textRowInsert = "";
} else {
textRowInsert = t.children[iRowInsert].innerText;
}
for ( iRowWalk = 0; iRowWalk <= iRowInsert ; iRowWalk++ )
{
if (iColumn) {
if(typeof(t.children[iRowWalk].children[iColumn]) != "undefined")
textRowCurrent = t.children[iRowWalk].children[iColumn].innerText;
else
textRowCurrent = "";
} else {
textRowCurrent = t.children[iRowWalk].innerText;
}
//
// We save our values so we can manipulate the numbers for
// comparison
//
current = textRowCurrent;
insert = textRowInsert;
// If the value is not a number, we sort normally, else we evaluate
// the value to get a numeric representation
//
if ( !isNaN(current) && !isNaN(insert)) //fix a bug by VN 2002.6.18
{
current= eval(current);
insert= eval(insert);
}
else
{
current = current.toLowerCase();
insert = insert.toLowerCase();
}
if ( ( (!fReverse && insert < current)
|| ( fReverse && insert > current) )
&& (iRowInsert != iRowWalk) )
{
eRowInsert = t.children[iRowInsert];
eRowWalk = t.children[iRowWalk];
t.insertBefore(eRowInsert, eRowWalk);
iRowWalk = iRowInsert; // done
}
}
}
}
/// Drag
function InitHeader()
{
var cx=0;
var cy=0;
var c;
for (i=0; i
var clickCell = theadrow.children[i];
clickCell.selectIndex = i;
c = clickCell.offsetParent;
if(cx == 0 && cy == 0 )
{
while (c.offsetParent != null) {
cy += c.offsetTop;
cx += c.offsetLeft;
c = c.offsetParent;
}
}
arrHitTest[i][0] = cx + clickCell.offsetLeft;
arrHitTest[i][1] = cy + clickCell.offsetTop;
arrHitTest[i][2] = clickCell;
arrHitTest[i][3] = cx + clickCell.offsetLeft + eval(clickCell.width);
}
}
function onSelect()
{
//disable selection
return false;
}
function ChangeHeader(iChange)
{
for(var y = 0; y < arrHitTest.length; y++)
{
if (arrHitTest[y][2].currentStyle.backgroundColor == dragColor)
arrHitTest[y][2].style.backgroundColor = defaultTitleColor;
}
if(iChange == "-1") return;
arrHitTest[iChange][2].style.backgroundColor = dragColor;
}
function onMouseUp(e)
{
if(!bDragMode) return;
bDragMode = false;
var iSelected = objDragItem.selectIndex;
objDragItem.removeNode(true);
objDragItem = null;
ChangeHeader(-1);
if( (iArrayHit - 1) < 0 || iSelected < 0) return; // default faliure
CopyRow(iSelected, (iArrayHit - 1) );
// Reset our variables
iSelected = 0;
iArrayHit = -1;
}
function onMouseDown(e)
{
bDragMode = true;
var src = e.srcElement;
var c = e.srcElement;
while (src.tagName != "TD")
src = src.parentElement;
// Create our header on the fly
objDragItem = document.createElement("DIV");
objDragItem.innerHTML = src.innerHTML;
objDragItem.style.height = src.currentStyle.height;
objDragItem.style.width = src.currentStyle.width;
objDragItem.style.background = src.currentStyle.backgroundColor;
objDragItem.style.fontColor = src.currentStyle.fontColor;
objDragItem.style.position = "absolute";
objDragItem.selectIndex = src.selectIndex;
while (c.offsetParent != null)
{
objDragItem.style.y += c.offsetTop;
objDragItem.style.x += c.offsetLeft;
c = c.offsetParent;
}
objDragItem.style.borderStyle = "outset";
objDragItem.style.display = "none";
src.insertBefore(objDragItem);
}
function onMouseMove(e)
{
if(!bDragMode || !objDragItem) return; // If we aren't dragging or our object
// is null, we return
if(event.button!=1) onMouseUp(event);
// Hardcoded value for height difference
var midWObj = objDragItem.style.posWidth / 2;
var midHObj = 12;
// Save mouse's position in the document
var intTop = e.clientY + element.document.body.scrollTop;
var intLeft = e.clientX + element.document.body.scrollLeft;
var cx=0,cy=0;
var elCurrent = objDragItem.offsetParent;
while (elCurrent.offsetParent != null) {
cx += elCurrent.offsetTop;
cy += elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
objDragItem.style.pixelTop = intTop - cx - midHObj;
objDragItem.style.pixelLeft = intLeft - cy - midWObj;
if(objDragItem.style.display == "none") objDragItem.style.display = "";
iArrayHit = CheckHit(intTop , intLeft , e);
e.cancelBubble = false;
e.returnValue = false;
}
function CheckHit(x,y,e)
{
midWObj = objDragItem.style.posWidth / 2;
midHObj = 12;
if( ((x) > (arrHitTest[0][1] + 20) ) || ( (x) < (arrHitTest[0][1]) ) )
{
ChangeHeader(-1);
return -1;
}
for(var i=0; i < colCount; i++)
{
if( (y) > (arrHitTest[i][0]) && (y) < (arrHitTest[i][3] )) //+ 100))
{
ChangeHeader(i);
return i + 1;
}
}
return -1;
}
//
// Copy from row to row.. Does the Header also.
//
function CopyRow(from, to)
{
if(from == to) return;
var origfrom = from;
var origto = to;
var iDiff = 0;
if( from > to )
{
iDiff = from - to;
var saveObj = theadrow.children[from].innerHTML;
var saveWidth = theadrow.children[from].width;
for(var i = 0 ; i < iDiff; i++)
{
theadrow.children[from].innerHTML = theadrow.children[from - 1].innerHTML;
theadrow.children[from].width = theadrow.children[from - 1].width;
from--;
}
theadrow.children[to].innerHTML = saveObj;
theadrow.children[to].width = saveWidth;
}
else
{
iDiff = to - from;
var saveObj = theadrow.children[from].innerHTML;
var saveWidth = theadrow.children[from].width;
for(var i = 0 ; i < iDiff; i++)
{
theadrow.children[from].innerHTML = theadrow.children[from + 1].innerHTML;
theadrow.children[from].width = theadrow.children[from + 1].width;
from++;
}
theadrow.children[to].innerHTML = saveObj;
theadrow.children[to].width = saveWidth;
}
for(var i = 0 ; i < theadrow.children.length; i++)
theadrow.children[i].selectIndex = i;
InitHeader();
for ( var iRowInsert = 0 ; iRowInsert < tbody.rows.length; iRowInsert++ )
{
from = origfrom;
to = origto;
if( from > to )
{
iDiff = from - to;
var saveObj = tbody.children[iRowInsert].children[from].innerHTML
for(var i = 0 ; i < iDiff; i++)
{
tbody.children[iRowInsert].children[from].innerHTML = tbody.children[iRowInsert].children[from - 1].innerHTML;
from--;
}
tbody.children[iRowInsert].children[to].innerHTML = saveObj;
}
else
{
iDiff = to - from;
var saveObj = tbody.children[iRowInsert].children[from].innerHTML
for(var i = 0 ; i < iDiff; i++)
{
tbody.children[iRowInsert].children[from].innerHTML = tbody.children[iRowInsert].children[from + 1].innerHTML;
from++;
}
tbody.children[iRowInsert].children[to].innerHTML = saveObj;
}
}
}
</script>
+展开
-HTML
<!!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Darkvn">
<META NAME="Description" CONTENT="fun with table">
<style type="text/css">
<!--
tbody { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; font-weight: normal}
thead { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; font-weight: bold;}
.conBtn {width: 22px;height:18;}
-->
</style>
</HEAD>
<BODY>
<BR><CENTER>Powerful Table with DHTML Behaviors</CENTER><BR>
<TABLE style="behavior:url(tableAct.htc);width:600px;BORDER:black 1px solid; background-color:#eeeecc;border-collapse:collapse"
borderColor=#999999 cellSpacing=0 cellPadding=2 border=1 dragcolor='gray' slcolor=#1fffcc hlcolor=#BEC5DE Editable=true align=center>
<THEAD bgColor="#ffcc00">
<TR align=center>
<TD width=100>First Name</TD>
<TD width=100>Last Name</TD>
<TD width=100>Team</TD>
<TD width=100>Engine</TD>
<TD width=100>Tyres</TD>
<TD width=100>Fastest Lap</TD >
</TR>
</THEAD>
<TBODY>
<tr>
<TD>Michael</TD>
<TD>Schumacher</TD>
<TD>Ferrari</TD>
<TD>Ferrari</TD>
<TD>Bridgestone</TD>
<TD>1.15.872</TD>
</tr>
<tr>
<TD>Rubens</TD>
<TD>Barrichello</TD>
<TD>Ferrari</TD>
<TD>Ferrari</TD>
<TD>Bridgestone</TD>
<TD>1.16.760</TD>
</tr>
<tr>
<TD>Ralph</TD>
<TD>Schumacher</TD>
<TD>Williams</TD>
<TD>BMW</TD>
<TD>Michelin</TD>
<TD>1.16.297</TD>
</tr>
<tr>
<TD>Juan-Pablo</TD>
<TD>Montoya</TD>
<TD>Williams</TD>
<TD>BMW</TD>
<TD>Michelin</TD>
<TD>1.17.123</TD>
</tr>
<tr>
<TD>David</TD>
<TD>Coulthard</TD>
<TD>McLaren</TD>
<TD>Mercedes</TD>
<TD>Bridgestone</TD>
<TD>1.16.423</TD>
</tr>
<tr>
<TD>Mika</TD>
<TD>Hakkinen</TD>
<TD>McLaren</TD>
<TD>Mercedes</TD>
<TD>Bridgestone</TD>
<TD>1.16.979</TD>
</tr>
<tr>
<TD>Jarno</TD>
<TD>Trulli</TD>
<TD>Jordan</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.16.459</TD>
</tr>
<tr>
<TD>Ricardo</TD>
<TD>Zonta</TD>
<TD>Jordan</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.17.328</TD>
</tr>
<tr>
<TD>Olivia</TD>
<TD>Panis</TD>
<TD>BAR</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.16.771</TD>
</tr>
<tr>
<TD>Jacques</TD>
<TD>Villeneuve</TD>
<TD>BAR</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.17.035</TD>
</tr>
<tr>
<TD>Kimi</TD>
<TD>Raikkonen</TD>
<TD>Sauber</TD>
<TD>Petronas</TD>
<TD>Bridgestone</TD>
<TD>1.16.875</TD>
</tr>
<tr>
<TD>Nick</TD>
<TD>Heidfeld</TD>
<TD>Sauber</TD>
<TD>Petronas</TD>
<TD>Bridgestone</TD>
<TD>1.17.165</TD>
</tr>
<tr>
<TD>Eddie</TD>
<TD>Irvine</TD>
<TD>Jaguar</TD>
<TD>Cosworth</TD>
<TD>Michelin</TD>
<TD>1.18.016</TD>
</tr>
<tr>
<TD>Pedro</TD>
<TD>de la Rosa</TD>
<TD>Jaguar</TD>
<TD>Cosworth</TD>
<TD>Michelin</TD>
<TD>1.18.015</TD>
</tr>
<tr>
<TD>Hugh</TD>
<TD>Gengine</TD>
<TD>Lotus</TD>
<TD>Renault</TD>
<TD>Michelin</TD>
<TD>1.15.015</TD>
</tr>
<tr>
<TD>Gloria</TD>
<TD>Slap</TD>
<TD>Lotus</TD>
<TD>Renault</TD>
<TD>Michelin</TD>
<TD>1.15.012</TD>
</tr>
</TBODY>
<TFOOT>
<tr>
<TD colspan=6 align="right">
<span id="tableStatus" style="width:300;overflow:hidden;font-family: 'Verdana';font-size:10" >select:</span>
<input id=btnAddRow class=conBtn type=button value="+" Action="AddRow">
<input id=btnDelRow class=conBtn type=button value="-" Action="DelRow">
</TD>
</tr>
</TFOOT>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Darkvn">
<META NAME="Description" CONTENT="fun with table">
<style type="text/css">
<!--
tbody { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; font-weight: normal}
thead { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; font-weight: bold;}
.conBtn {width: 22px;height:18;}
-->
</style>
</HEAD>
<BODY>
<BR><CENTER>Powerful Table with DHTML Behaviors</CENTER><BR>
<TABLE style="behavior:url(tableAct.htc);width:600px;BORDER:black 1px solid; background-color:#eeeecc;border-collapse:collapse"
borderColor=#999999 cellSpacing=0 cellPadding=2 border=1 dragcolor='gray' slcolor=#1fffcc hlcolor=#BEC5DE Editable=true align=center>
<THEAD bgColor="#ffcc00">
<TR align=center>
<TD width=100>First Name</TD>
<TD width=100>Last Name</TD>
<TD width=100>Team</TD>
<TD width=100>Engine</TD>
<TD width=100>Tyres</TD>
<TD width=100>Fastest Lap</TD >
</TR>
</THEAD>
<TBODY>
<tr>
<TD>Michael</TD>
<TD>Schumacher</TD>
<TD>Ferrari</TD>
<TD>Ferrari</TD>
<TD>Bridgestone</TD>
<TD>1.15.872</TD>
</tr>
<tr>
<TD>Rubens</TD>
<TD>Barrichello</TD>
<TD>Ferrari</TD>
<TD>Ferrari</TD>
<TD>Bridgestone</TD>
<TD>1.16.760</TD>
</tr>
<tr>
<TD>Ralph</TD>
<TD>Schumacher</TD>
<TD>Williams</TD>
<TD>BMW</TD>
<TD>Michelin</TD>
<TD>1.16.297</TD>
</tr>
<tr>
<TD>Juan-Pablo</TD>
<TD>Montoya</TD>
<TD>Williams</TD>
<TD>BMW</TD>
<TD>Michelin</TD>
<TD>1.17.123</TD>
</tr>
<tr>
<TD>David</TD>
<TD>Coulthard</TD>
<TD>McLaren</TD>
<TD>Mercedes</TD>
<TD>Bridgestone</TD>
<TD>1.16.423</TD>
</tr>
<tr>
<TD>Mika</TD>
<TD>Hakkinen</TD>
<TD>McLaren</TD>
<TD>Mercedes</TD>
<TD>Bridgestone</TD>
<TD>1.16.979</TD>
</tr>
<tr>
<TD>Jarno</TD>
<TD>Trulli</TD>
<TD>Jordan</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.16.459</TD>
</tr>
<tr>
<TD>Ricardo</TD>
<TD>Zonta</TD>
<TD>Jordan</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.17.328</TD>
</tr>
<tr>
<TD>Olivia</TD>
<TD>Panis</TD>
<TD>BAR</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.16.771</TD>
</tr>
<tr>
<TD>Jacques</TD>
<TD>Villeneuve</TD>
<TD>BAR</TD>
<TD>Honda</TD>
<TD>Bridgestone</TD>
<TD>1.17.035</TD>
</tr>
<tr>
<TD>Kimi</TD>
<TD>Raikkonen</TD>
<TD>Sauber</TD>
<TD>Petronas</TD>
<TD>Bridgestone</TD>
<TD>1.16.875</TD>
</tr>
<tr>
<TD>Nick</TD>
<TD>Heidfeld</TD>
<TD>Sauber</TD>
<TD>Petronas</TD>
<TD>Bridgestone</TD>
<TD>1.17.165</TD>
</tr>
<tr>
<TD>Eddie</TD>
<TD>Irvine</TD>
<TD>Jaguar</TD>
<TD>Cosworth</TD>
<TD>Michelin</TD>
<TD>1.18.016</TD>
</tr>
<tr>
<TD>Pedro</TD>
<TD>de la Rosa</TD>
<TD>Jaguar</TD>
<TD>Cosworth</TD>
<TD>Michelin</TD>
<TD>1.18.015</TD>
</tr>
<tr>
<TD>Hugh</TD>
<TD>Gengine</TD>
<TD>Lotus</TD>
<TD>Renault</TD>
<TD>Michelin</TD>
<TD>1.15.015</TD>
</tr>
<tr>
<TD>Gloria</TD>
<TD>Slap</TD>
<TD>Lotus</TD>
<TD>Renault</TD>
<TD>Michelin</TD>
<TD>1.15.012</TD>
</tr>
</TBODY>
<TFOOT>
<tr>
<TD colspan=6 align="right">
<span id="tableStatus" style="width:300;overflow:hidden;font-family: 'Verdana';font-size:10" >select:</span>
<input id=btnAddRow class=conBtn type=button value="+" Action="AddRow">
<input id=btnDelRow class=conBtn type=button value="-" Action="DelRow">
</TD>
</tr>
</TFOOT>
</TABLE>
</BODY>
</HTML>
加支付宝好友偷能量挖...
