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

Discussion in 'ASP .Net' started by Subba Rao via DotNetMonster.com, Mar 19, 2005.

  1. ---------------------------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-----------------------------------

    --
    Message posted via http://www.dotnetmonster.com
    Subba Rao via DotNetMonster.com, Mar 19, 2005
    #1
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. TS
    Replies:
    14
    Views:
    662
  2. THTB
    Replies:
    0
    Views:
    174
  3. ruds
    Replies:
    7
    Views:
    293
  4. Max Williams
    Replies:
    3
    Views:
    158
    Robert Klemme
    Jan 6, 2009
  5. T.G.
    Replies:
    2
    Views:
    1,055
Loading...

Share This Page