<html>
<head>
<title>Table Dynamics - ReOrder Rows (Asc OR Desc) and Move Columns About
</title>
<style>
.bgred { color:white; background-color:#FF0000; }
.bggreen { color:white; background-color:#00FF00; }
.bgblue { color:white; background-color:#0000FF; }
.bgorange { color:white; background-color:#FFCC00; }
.bgyellow { color:white; background-color:#F0F020; }
</style>
<script language="jscript">
function reorder(listName, order) {
var oHid_Order = document.getElementById("hid_" + listName + "_order");
if (oHid_Order.value == order) {
// Nothing to do : the order is allready good
return;
} else {
oHid_Order.value = order;
var oTable = document.getElementById(listName);
var nbRows = oTable.children.length;
var firstNode = oTable.children(0); // the first node will be reference.
for (var i=1; i<nbRows; i++) {
// What we are doing : get last row, delete it
// and recreate it before reference node
var curNode = oTable.children(nbRows-1);
curNode.removeNode(true);
oTable.insertBefore(curNode, firstNode);
}
}
}
var colupdSW=0;
function recol(listName, ncol, tocol) {
var itocol = parseInt(tocol) ;
var incol = parseInt(ncol) ;
if (itocol==incol) { return 0;}
LastNewCol = -1; // suppress last column autopopulate feature
var oTable = document.getElementById(listName);
var nbRows = oTable.children.length;
var firstNode = oTable.children(0); // the first node will be reference.
for (var i=1; i<nbRows+1; i++) {
var curNode = oTable.children(i-1);
var numTDs = curNode.children.length;
if ( (itocol>numTDs-1)||(incol>numTDs-1) ) // optional to handle rows with fewer td-cells
{
var wscount = 0;
while((itocol>numTDs-1)||(incol>numTDs-1)) {
var OnumTDs = numTDs ;
curNode = oTable.children(i-1);
curNode.insertCell(numTDs); // .appendChild(document.createTextNode("Null"));
curNode = oTable.children(i-1);
numTDs = curNode.children.length;
wscount++;
if (wscount>100) // if any row with load short by over 100 bricks - table is deemed messed up
{
alert('Row '+i+': Cells in Column Not Completely Populated - cannot move column \n too bad it\'s screwd up anyway');
bailout(cloudofdirtybytes) ;
}
}
}
var fstTDNode = curNode.children(itocol);
var curTDNode = curNode.children(incol);
if(itocol<incol)
{
curNode.insertBefore(curTDNode, fstTDNode);
} else {
var fstTDNode = curNode.children(itocol);
var curTDNode = curNode.children(incol);
DOMNode_insertAfter(curTDNode, fstTDNode);
}
for (var j=0; j<numTDs; j++) {
curNode.children(j).colF=j ;
}
}
colupdSW= 1 ;
}
function DOMNode_insertAfter(newChild,refChild)
//Post condition: if childNodes[n] is refChild, than childNodes[n+1] is newChild.
{
var parentx=refChild.parentNode;
if(parentx.lastChild==refChild) { return parentx.appendChild(newChild);}
else {return parentx.insertBefore(newChild,refChild.nextSibling);}
}
var x, y, z, col, fromcol;
window.onload = init;
z = 0 ; // 0 = button not pressed down; No Mouse-Moved Layer
col = -9 ; // destination column where MouseUp occurs
fromcol = -9 ; // source column where MouseDown Occurs
function init() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getXY;
}
function getXY(e) {
x = (window.Event) ? e.pageX : event.clientX;
y = (window.Event) ? e.pageY : event.clientY;
if (lay1.style.display=="")
{ lay1.style.top=y+9; lay1.style.left=x+4;}
}
function BlurHead() {
hid_list1_order.focus();
}
function MOV(el) {
if(z==1){el.style.backgroundColor='#CCDDFF'} ;
}
function MOT(el) {
el.style.backgroundColor='#F0FFFF' ;
}
function MDN(el) {
z = 1;
fromcol = el.colF;
lay1.innerText = el.innerText;
}
function MUP(el) {
if(z==1)
{
col =el.colF ;
recol('list1', fromcol, col);
recol('head1', fromcol, col);
}
z =0;
lay1.style.display ='none'
}
</script>
</head>
<body onmouseup = " z=0; lay1.style.display='none'; setTimeout('BlurHead() ; ',100); "
onmousedown= " if (z==1) { lay1.style.display='' ; lay1.style.left=x; lay1.style.top=y; } "
>
<span style="font-family:Verdana;color:blue;size:10;">
Client-Side Dynamic tables<br>
(1) Press sort buttons to reverse sequence of rows in table.<br>
(2) Drag and drop column headers to move order of columns in table.<br>
<p>
Action will slow down for large tables and slower processors. <br>
</span>
<input id="hid_list1_order" type="text" value="asc" xstyle="width:0;" />
<input type="button" value="sort asc." onclick="reorder('list1', 'asc');" />
<input type="button" value="sort desc." onclick="reorder('list1', 'desc');" />
<table ID=TABL1 border=1 width=70%>
<thead ID="head1" style="background-color:#F0FFFF;">
<th colF=0
onmouseover=" MOV(this) ; " onmouseout =" MOT(this) ; "
onmousedown=" MDN(this) ; " onmouseup =" MUP(this) ; "
>Rights</th>
<th colF=1
onmouseover=" MOV(this) ; " onmouseout =" MOT(this) ; "
onmousedown=" MDN(this) ; " onmouseup =" MUP(this) ; "
>Colors</th>
<th colF=2
onmouseover=" MOV(this) ; " onmouseout =" MOT(this) ; "
onmousedown=" MDN(this) ; " onmouseup =" MUP(this) ; "
>Waters</th>
<th colF=3
onmouseover=" MOV(this) ; " onmouseout =" MOT(this) ; "
onmousedown=" MDN(this) ; " onmouseup =" MUP(this) ; "
>Names</th>
</thead>
<tbody ID="list1">
<tr>
<td>1 Life</td> <td class="bgred">Red</td> <td>Atlantic</td> <td>Britney</td>
</tr><tr>
<td>2 Liberty</td> <td class="bgorange">Orange</td> <td>Pacific</td> <td>Shania</td>
</tr><tr>
<td>3 Free Press</td> <td class="bgyellow">Yellow</td> <td>Artic</td> <td>Angelina</td>
</tr><tr>
<td>4 Religion</td> <td class="bggreen">Green</td> <td>Indian</td>
</tr><tr>
<td>5 Free Assembly</td> <td class="bgblue">Blue</td> <td>Taho</td> <td>Yolanda</td>
</tr>
</tbody>
</table>
<div ID="lay1"
style="position:absolute; left:0; top:0; display:none; font-weight:bold; text-align:center;
background-color: blue; font-family:Verdana; font-size: 14; size:14; color:white;
height:20; width:90; "
>
ColName
</div>
</body>
</html>This topic is archived.