how to highlight a row when on click and keep it highlighted until next click

Discussion in 'Javascript' started by john woo, Jun 16, 2005.

  1. john woo

    john woo Guest

    Hi

    I'm not good at JS, but want to get more about it.

    I want to use a JSP (the java code just used to get date, the rest are
    html and javascript),

    to display a table. the requirement is the all rows in even number in
    light-blue, rows in odd number in light gray, when a mouse clicks on a
    row, this row gets highlighted and in yellow, and it keeps highlighted
    until next row is clicked on; plus when a row gets click, the data on
    the row is saved to forward to (same as putting vales in input form
    then forward to action form).

    part of my code is

    int color=0;

    <tr onmousedown="this.className='current';"
    onmouseup="this.className='current'; saveRecord('<%=a%>',
    '<%=b%>',
    '<%=c%>');"
    <%if (color%2==0){%>
    onmouseout="this.className='even';" class="even"
    <% } else { %>
    onmouseout="this.className='odd ';" class="odd"
    <% } %>
    >

    <td><%=e%></td>
    <td>

    ...
    function saverecord(...)

    //<% %> is java code tag in jsp, used to get value

    question
    1.
    result from above code, rows get highlighted when mouse moveing on it,
    and can't keep highlighted for long (when mouse moves away,it is no
    long in yellow).

    2.
    in saverecord function, what is the idea to put the valuables (a, b, c,
    --they are global vars) in a hidden input form? or other way to
    implement this?

    --
    Thanks
    John
    Toronto
    john woo, Jun 16, 2005
    #1
    1. Advertising

  2. john woo

    RobG Guest

    Re: how to highlight a row when on click and keep it highlighteduntil next click

    john woo wrote:
    > Hi
    >
    > I'm not good at JS, but want to get more about it.
    >
    > I want to use a JSP (the java code just used to get date, the rest are
    > html and javascript),
    >
    > to display a table. the requirement is the all rows in even number in
    > light-blue, rows in odd number in light gray, when a mouse clicks on a
    > row, this row gets highlighted and in yellow, and it keeps highlighted
    > until next row is clicked on; plus when a row gets click, the data on
    > the row is saved to forward to (same as putting vales in input form
    > then forward to action form).
    >
    > part of my code is
    >
    > int color=0;
    >
    > <tr onmousedown="this.className='current';"
    > onmouseup="this.className='current'; saveRecord('<%=a%>',
    > '<%=b%>',
    > '<%=c%>');"
    > <%if (color%2==0){%>
    > onmouseout="this.className='even';" class="even"
    > <% } else { %>
    > onmouseout="this.className='odd ';" class="odd"
    > <% } %>
    >
    > <td><%=e%></td>
    > <td>
    >
    > ...
    > function saverecord(...)
    >
    > //<% %> is java code tag in jsp, used to get value
    >
    > question
    > 1.
    > result from above code, rows get highlighted when mouse moveing on it,
    > and can't keep highlighted for long (when mouse moves away,it is no
    > long in yellow).


    Below is some code that highlights a row when they are clicked on.
    The current highlight is removed when the next row is clicked on.

    >
    > 2.
    > in saverecord function, what is the idea to put the valuables (a, b, c,
    > --they are global vars) in a hidden input form? or other way to
    > implement this?
    >


    Always remember that if the user has JavaScript disabled or not
    available, you will not get the global variables (they won't even
    exist).

    In your form, create a hidden field:

    <form name="formA" onsubmit="return doForm(this);" ... >
    <input type="hidden" name="globVars" ... >
    ...
    </form>

    In your script, create function doForm:

    function doForm(f){
    // Do form validation, if doesn't pass return false
    // If does pass, put values into hidden field with your
    // choice of delimiter:

    f.globVars.value = a + ',' + b + ',' + c;

    }

    And the promised highlighting script:

    <style type="text/css">
    td {width: 5em;}
    ..even {color: #00FF00; background-color: #B3B3FF;}
    ..odd {color: #00FF00; background-color: #FFFF33;}
    </style>

    <script type="text/javascript">

    // Variable to remember table, row and original
    // colour of previous element.
    var oldRow = { r:null , c:null };

    // Highlight color (should use CSS)
    var hc = '#CC0066';

    function highlightRow(r){

    // If oldRow has been set, restore previous row
    if ( oldRow.r ) {
    oldRow.r.style.backgroundColor = oldRow.c;
    }

    // If a row was clicked on
    if ( r && 'tr' == r.nodeName.toLowerCase() ){
    // Store reference to row and its colour
    oldRow.r = r;
    oldRow.c = r.style.backgroundColor;
    // Highlight clicked on row
    r.style.backgroundColor = hc;

    // Otherwise, reset oldRow values
    } else {
    oldRow.r = null;
    oldRow.c = null;
    }
    }

    function initTable(t){
    if ( !document.getElementById || !document.body.style ) {return;}
    var r = document.getElementById(t).rows;
    var i = r.length;
    while ( i-- ) {
    r.onclick=function(){highlightRow(this);};
    }
    }

    window.onload = function() {initTable('tableA')};

    </script>


    <table id="tableA">
    <tr style="background-color: #FFFF33;">
    <td>blah</td><td>blah</td>
    </tr>
    <tr style="background-color: #B3B3FF;">
    <td>blah</td><td>blah</td>
    </tr>
    <tr class="odd">
    <td>blah</td><td>blah</td>
    </tr>
    <tr class="even">
    <td>blah</td><td>blah</td>
    </tr>
    </table>
    <input type="button" value="Clear highlight" onclick="
    highlightRow();
    ">

    --
    Rob
    RobG, Jun 16, 2005
    #2
    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. =?Utf-8?B?UGF0cmljay5PLklnZQ==?=

    Highlighted Row in Edit,insert Mode(Datagrid) - Question -

    =?Utf-8?B?UGF0cmljay5PLklnZQ==?=, Nov 11, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    678
    =?Utf-8?B?UGF0cmljay5PLklnZQ==?=
    Nov 11, 2004
  2. Fernando Lopes
    Replies:
    0
    Views:
    3,190
    Fernando Lopes
    Apr 28, 2005
  3. Sandip Chitale
    Replies:
    1
    Views:
    1,044
  4. Deniz Bahar
    Replies:
    2
    Views:
    463
    Andrey Tarasevich
    Mar 9, 2005
  5. Bou Dramé
    Replies:
    0
    Views:
    169
    Bou Dramé
    Oct 3, 2008
Loading...

Share This Page