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

  • Thread starter Subba Rao via DotNetMonster.com
  • Start date
S

Subba Rao via DotNetMonster.com

---------------------------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.type == "checkbox")
arr.push(el, el.checked);
if(parseInt(firstRow.getAttribute("id"),10) > 0){
secondRow = document.getElementById(parseInt(firstRow.getAttribute("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.type == "checkbox")
arr.push(el, el.checked);
if(parseInt(firstRow.getAttribute("id"),10) < (baseLocation.rows.length -
1)){
secondRow = document.getElementById(parseInt(firstRow.getAttribute("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-----------------------------------
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Filter table rows based on multiple checkboxes value 2
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Sort by number of characters 1
Only one table shows up with the information 2
Moving dynamically created table rows up and down in an HTML table 2
I want to Display Excel As HTML In js 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Filename undefined for Blob ? 1

Members online

Total: 37 (members: 2, guests: 35)
Robots: 185

Forum statistics

Threads
473,764
Messages
2,569,566
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top