472,779 Members | 1,955 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,779 software developers and data experts.

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

---------------------------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
Nov 19 '05 #1
0 1756

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Henk Verhoeven | last post by:
(Reply on this newsgroup to an email - reply by email did not work) Wolfman wrote: > > Hi, > I found your Email in the php Newsgroup. > I was looking for some way to resize some graphiks on my...
15
by: Xah Lee | last post by:
# -*- coding: utf-8 -*- # Python suppose you want to walk into a directory, say, to apply a string replacement to all html files. The os.path.walk() rises for the occasion. import os ...
1
by: Les Juby | last post by:
A year or two back I needed a search script to scan thru HTML files on a client site. Usual sorta thing. A quick search turned up a neat script that provided great search results. It was fast,...
3
by: addi | last post by:
All, I will be eternally greatful if someone can provide snippet of code, URL or reference material that shows how to display data in a "n colums * n rows" format. I am new to ASP and have...
2
by: Muzzy | last post by:
Hi, I've used information on these newsgroups to build many pages. So I thought that now that I have my script working (something that I've been working on for about a week), I should post it so...
1
by: samn | last post by:
I wrote the following script in order to traverse an HTML table and merge the cells that have the same value across multiple rows. For some reason, however, it works for the first, third, and...
3
by: Don Miller | last post by:
In my migration from ASP to ASP.NET 2.0, I have a fair number of complicated HTML tables that defy anything .NET can do. Using classic ASP I created these tables (by string concatenation) by moving...
3
by: Angus | last post by:
I have a web page with a toolbar containing a Save button. The Save button can change contextually to be a Search button in some cases. Hence the button name searchsavechanges. The snippet of...
1
by: Graham Hobbs | last post by:
Hello, My old laptop has DB2 V7 thereon. The only fixpaks I ever applied were FP1 (although I cant truly remember if I actually did this one) and FP2. Because it/they entirely satisfied my needs...
0
by: Rina0 | last post by:
Cybersecurity engineering is a specialized field that focuses on the design, development, and implementation of systems, processes, and technologies that protect against cyber threats and...
0
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
0
by: lllomh | last post by:
How does React native implement an English player?
0
by: Mushico | last post by:
How to calculate date of retirement from date of birth
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.