---------------------------HTML----------------------------------------
<html>
<head>
<title>:: DHTML Table Demo ::</title>
<script langauge="javascript" src="InterchangeRows.js"></script>
<style>
.mainTable {
background-color: black;
color: white;
font-face: tahoma;
font-size: 13 px;
border-size: 2;
}
</style>
</head>
<body onload="init('mainTable', 'btnMoveUp', 'btnMoveDown')">
<table name="mainTable" id="mainTable" class=mainTable cellpadding="2"
cellspacing="2">
<tr>
<td width="25%">row(0)cell(0)</td>
<td width="25%">row(0)cell(1)</td>
<td width="25%">row(0)cell(2)</td>
<td width="25%">row(0)cell(3)</td>
</tr>
<tr>
<td width="25%">row(1)cell(0)</td>
<td width="25%">row(1)cell(1)</td>
<td width="25%">row(1)cell(2)</td>
<td width="25%">row(1)cell(3)</td>
</tr>
<tr>
<td width="25%">row(2)cell(0)</td>
<td width="25%">row(2)cell(1)</td>
<td width="25%">row(2)cell(2)</td>
<td width="25%">row(2)cell(3)</td>
</tr>
<tr>
<td width="25%">row(3)cell(0)</td>
<td width="25%">row(3)cell(1)</td>
<td width="25%">row(3)cell(2)</td>
<td width="25%">row(3)cell(3)</td>
</tr>
</table>
<INPUT id=btnMoveUp type=button value='^' name=btnMoveUp>
<INPUT id=btnMoveDown type=button value='v' name=btnMoveDown></p>
</body>
</html>
---------------------------END-HTML-------------------------------------
---------------------------SCRIPT---------------------------------------
var firstRow, secondRow, baseLocation, rowSelected = false, el, upButtonID,
downButtonID, bTableID;
//mark a row on a click of the mouse
function onRowClickHandler() {
firstRow = window.event.srcElement.parentElement;
for(i=0;i<baseLocation.rows.length;i++)
if(i == parseInt(firstRow.getAttribute("id"))){
firstRow.style.backgroundColor= 'Wheat';
firstRow.style.color= 'Black';
firstRow.onmouseout = '';
firstRow.onmouseover = '';
rowSelected = true;
}
else {
baseLocation.rows(i).style.backgroundColor= '';
baseLocation.rows(i).style.color= '';
baseLocation.rows(i).onmouseout = onMouseOutHandler;
baseLocation.rows(i).onmouseover = onMouseOverHandler;
}
}
//action handler when the the moveup button is clicked
function onMoveUpClick() {
if(rowSelected) {
el = baseLocation.all.tags("INPUT"), i = 0, arr = [];
for(; i < el.length; i++)
if(el[i].type == "checkbox")
arr.push(el[i], el[i].checked);
if(parseInt(firstRow.getAttribute("id"),10) > 0){
secondRow = document.getElementById(parseInt(firstRow.getAttri bute("id")
, 10) - 1);
baseLocation.moveRow(firstRow.getAttribute("id"), secondRow.getAttribute
("id"));
while(arr.length > 0)
arr.shift().checked = arr.shift();
firstRow.onmouseout = '';
firstRow.onmouseover = '';
init(bTableID, upButtonID, downButtonID);
}else
alert("First Row cannot be moved up");
}else
alert("Select a Row");
}
//action handler when the the movedown button is clicked
function onMoveDownClick() {
if(rowSelected) {
el = baseLocation.all.tags("INPUT"), i = 0, arr = [];
for(; i < el.length; i++)
if(el[i].type == "checkbox")
arr.push(el[i], el[i].checked);
if(parseInt(firstRow.getAttribute("id"),10) < (baseLocation.rows.length -
1)){
secondRow = document.getElementById(parseInt(firstRow.getAttri bute("id")
, 10) + 1);
baseLocation.moveRow(firstRow.getAttribute("id"), secondRow.getAttribute
("id"));
while(arr.length > 0)
arr.shift().checked = arr.shift();
firstRow.onmouseout = '';
firstRow.onmouseover = '';
init(bTableID, upButtonID, downButtonID);
}else
alert("Last row cannot be moved down");
}else
alert("Select a Row");
}
//action handler for mouseover on a row
function onMouseOverHandler() {
var curRow = window.event.srcElement.parentElement;
curRow.style.cursor = 'Hand';
curRow.style.backgroundColor = '#aefdcb';
curRow.style.color='black';
}
//action handler for mouseout on a row
function onMouseOutHandler() {
var curRow = window.event.srcElement.parentElement;
curRow.style.cursor = '';
curRow.style.backgroundColor = '';
curRow.style.color='';
}
//action handler for keypress on the page
function onKeyDownHandler() {
var key = window.event.keyCode;
if(key == 27) {
rowSelected = false;
init(bTableID, upButtonID, downButtonID);
}else if(key == 38) {
if(rowSelected) {
var prevID = parseInt(firstRow.getAttribute("id"),10);
if(prevID > 0){
firstRow = document.getElementById(prevID - 1);
for(i=0;i<baseLocation.rows.length;i++)
if(i == parseInt(firstRow.getAttribute("id"))){
firstRow.style.backgroundColor= 'Wheat';
firstRow.style.color= 'Black';
firstRow.onmouseout = '';
firstRow.onmouseover = '';
rowSelected = true;
}
else {
baseLocation.rows(i).style.backgroundColor= '';
baseLocation.rows(i).style.color= '';
baseLocation.rows(i).onmouseout = onMouseOutHandler;
baseLocation.rows(i).onmouseover = onMouseOverHandler;
}
}
}else
alert("Select a Row");
}else if(key == 40) {
if(rowSelected) {
var prevID = parseInt(firstRow.getAttribute("id"),10);
if(prevID < (baseLocation.rows.length - 1)){
firstRow = document.getElementById(prevID + 1);
for(i=0;i<baseLocation.rows.length;i++)
if(i == parseInt(firstRow.getAttribute("id"))){
firstRow.style.backgroundColor= 'Wheat';
firstRow.style.color= 'Black';
firstRow.onmouseout = '';
firstRow.onmouseover = '';
rowSelected = true;
}
else {
baseLocation.rows(i).style.backgroundColor= '';
baseLocation.rows(i).style.color= '';
baseLocation.rows(i).onmouseout = onMouseOutHandler;
baseLocation.rows(i).onmouseover = onMouseOverHandler;
}
}
}else
alert("Select a Row");
}
}
//initialize the table; this method that needs an explicit call during the
onload of the body
function init(bTable, mUpButton, mDownButton) {
upButtonID = mUpButton;
downButtonID = mDownButton;
bTableID = bTable;
baseLocation = document.getElementById(bTableID);
for(i=0;i<baseLocation.cells.length;i++)
baseLocation.cells(i).unselectable = "On";
for(i=0;i<baseLocation.rows.length;i++) {
baseLocation.rows(i).setAttribute("id", i);
baseLocation.rows(i).onclick = onRowClickHandler;
if(!rowSelected) {
baseLocation.rows(i).style.backgroundColor = '';
baseLocation.rows(i).style.color = '';
baseLocation.rows(i).onmouseover = onMouseOverHandler;
baseLocation.rows(i).onmouseout = onMouseOutHandler;
}
}
document.getElementById(mUpButton).onclick = onMoveUpClick;
document.getElementById(mDownButton).onclick = onMoveDownClick;
document.onkeydown = onKeyDownHandler;
}
---------------------------END-SCRIPT-----------------------------------
--
Message posted via http://www.dotnetmonster.com
