Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > script for moving rows up and down and traverse thru rows of HTML table

Reply
Thread Tools

script for moving rows up and down and traverse thru rows of HTML table

 
 
Subba Rao via DotNetMonster.com
Guest
Posts: n/a
 
      03-19-2005
---------------------------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 == 3 {
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Collection to implement linked structure traverse up and down ruds Java 7 12-06-2011 05:55 AM
Moving dynamically created table rows up and down in an HTML table T.G. Javascript 2 10-14-2008 12:56 PM
RDP thru Cisco VPN client and thru 501 Failure curttampa@gmail.com Cisco 21 08-26-2008 03:11 PM
Free Moving Estimate, Local Movers, Long Distance Moving, PackingSupplies, Storage Rental, Home Moving, Apartment Moving, Office Moving,Commercial Moving linkswanted ASP .Net 0 01-06-2008 04:45 AM
Can't access Web Service thru DLL (but can thru Windows App) THTB ASP .Net Web Services 0 05-17-2007 06:43 PM



Advertisments