Solved

click to highlght the result from a query

Posted on 1999-01-26
15
145 Views
Last Modified: 2010-04-09
I've a list box that cantains the results from a query, it's something like this:
N0      Name       Gender
1.       Mr.yyy     M
2.       Ms.sss     F

I wish to do these:
-->When I click on the row 1 - the whole row(contains the data of 1. Mr.yyy  M) will be highlighted, or change color
-->I can get the data from this row when I click on any position on this row in the list box. That's mean I can get the input as 1. Mr.yyy and M when click on row 1.
Is it possible to do this?  Shall I put my query results
into a table or list box as long as the above features can be done??
0
Comment
Question by:yune
  • 8
  • 7
15 Comments
 
LVL 6

Expert Comment

by:PBall
Comment Utility
When I click on the row 1 - the whole row(contains the data of 1. Mr.yyy  M) will be highlighted, or change color

When I click on the row 1 - the whole row(contains the data of 1. Mr.yyy  M) will be highlighted, or change color

Well, after looking at what you want, you might want to consider learning DHTML.  I've done in IE4 and the answer to both questions is yes.  It's posibble with DHTML.

But instead of putting the query result inside a listbox, you need to create your own "list box / grid" using 2 DIVs and TABLE.

The layout should be:
1. DIV to act as the outer container for the whole thing.
   This DIV will determine the width of the view.

   i.e.
<DIV id=qcontainer style='position:absolute;top:0px;left:0px;width:400px'>

2. TABLE to act as header (No.   Name    Gender), loosely positioned, with width of 100% so it will stretch as big as the
container DIV, mismatch fixed and percentage base column to suit
your need.

i.e.
<table width=100% cellpadding=0 cellspacing=1 border=0>
<tr>
  <td align=right valign=top width=35>No.</td>
  <td align=right valign=top>Name</td>
  <td align=right valign=top width=45>Gender</td>
</tr>
</table>

the Name column's width will stretch to compensate for the other two fixed columns.

3. Another DIV to act as the inner container.  this DIV will need to be set to auto overflow and also will act as the height determinant for the view.

i.e.

<DIV id=qicontainer style='width:100%;height:240px;overflow:auto'>

4. inner TABLE to hold the query results (this will scroll inside of the qicontainer)

<TABLE width=100% cellpadding=0 cellspacing=1 border=0>
:
build your row with ASP or other CGI here
:
</TABLE>

There you have it, first step to getting what you want.
Your own listbox pseudo-component that will support multiple grid color, links, etc. etc.

2.  If you are smart, move all the formatting to a style sheet,
create a bunch of classes.  One for the row when it's in its normal state, one for the row when it's highlighted.  attach this class to the TR tag of each query result.

<TR class=row_normal cURL='view.asp?ID=<%=rs("ID")%>'>
  <TD align=right valign=middle><%=rs("ID")%></TD>
  <TD align=left valign=middle><%=rs("Name")%></TD>
  <TD align=center valign=middle><%=rs("Gender")%></TD>
</TR>

now, hook the document.onClick event to a handler in a client side javascript.

<script>
document.onClick = docOnClick;

function docOnClick()
{
  var e = window.event;
  var s = e.srcElement;

  var o = findTR(s)

  if (o)
  {
    //if the TR tag has a cURL expando attach to it, go to it
    if (o.cURL.length > 0) {
      //highlight that row and open a window w/ o.cURL
      o.className = 'row_highlighted';
      popUp = window.open(o.cURL,'winView','...window attributes...');
    }
  }
}

function findTR(obj)
{
  //recursive function to parse the html document tags.

  if (obj.tagName == 'BODY') return null;
  if (obj.tagName == 'TR') return obj;
  return findTR(obj.parentElement);
}
</script>

0
 
LVL 6

Expert Comment

by:PBall
Comment Utility
Boy oh boy, that's a bit lenghty ain't it :)
0
 

Author Comment

by:yune
Comment Utility
Hi, Pball.
How if I want to make my page viewable with NS and IE?
0
 

Author Comment

by:yune
Comment Utility
Hi, PBall.
Can u pls give me a full example on this?
I tried out what u've explained in the previous comment...but I just don't know how and where to put the code in.  I m totally new in DHTML.  Can u pls explain or tell me where I can find resources on this. Pls...I've very limited time to do this.

Or anyone of u...pls help!

Yune.
0
 
LVL 6

Expert Comment

by:PBall
Comment Utility
<html>
<head>
<style>
#gridContainer {
      width:320px;
      border:2px inset THREEDHIGHLIGHT;
}
#gridIContainer {
      width:100%;      
      height:100px;
      overflow:auto;
      background-color:THREEDFACE;
}
#gridHeading {
      font:bold 8pt arial,helvetica;
      background-color:THREEDFACE;
      color:BUTTONTEXT;
}
heading {
      border:1px outset THREEDHIGHLIGHT;
}
gridrow {
}
</style>
      font:8pt arial,helvetica;
      background-color:WINDOW;
      color:WINDOWTEXT;
      cursor:hand;

<script>
function showMe( recordID )
{
      alert('Showing Record #'+recordID);
      
      //location.href='showme.asp?ID='+recordID
}
</script>

</head>
<body>

Above the Grid Container
<div id=gridContainer>
      <table id=gridHeading width=100% cellpadding=0 cellspacing=1 border=0>
      <tr>
            <td class=heading align=center valign=top width=45>No.</td>
            <td class=heading align=left valign=top>Name</td>
            <td class=heading align=left valign=top width=73>Gender</td>
      </tr>
      </table>

      <div id=gridIContainer>
            <table width=100% cellpadding=0 cellspacing=1 border=0>
            <tr class=gridrow title='Bring up my account' onClick='showMe(1)'>
                  <td align=center valign=top width=45>1</td>
                  <td align=left valign=top>George Washington</td>
                  <td align=center valign=top width=60>M</td>
            </tr>
            <tr class=gridrow title='Bring up my account' onClick='showMe(2)'>
                  <td align=center valign=top width=45>2</td>
                  <td align=left valign=top>Martha Washington</td>
                  <td align=center valign=top width=60>F</td>
            </tr>
            <tr class=gridrow title='Bring up my account' onClick='showMe(3)'>
                  <td align=center valign=top width=45>3</td>
                  <td align=left valign=top>Thomas Jefferson</td>
                  <td align=center valign=top width=60>M</td>
            </tr>
            <tr class=gridrow title='Bring up my account' onClick='showMe(4)'>
                  <td align=center valign=top width=45>4</td>
                  <td align=left valign=top>Bill Clinton</td>
                  <td align=center valign=top width=60>M</td>
            </tr>
            <tr class=gridrow title='Bring up my account' onClick='showMe(5)'>
                  <td align=center valign=top width=45>5</td>
                  <td align=left valign=top>Hillary Clinton</td>
                  <td align=center valign=top width=60>F</td>
            </tr>
            <tr class=gridrow title='Bring up my account' onClick='showMe(6)'>
                  <td align=center valign=top width=45>6</td>
                  <td align=left valign=top>Gerald Ford</td>
                  <td align=center valign=top width=60>M</td>
            </tr>
            <tr class=gridrow title='Bring up my account' onClick='showMe(7)'>
                  <td align=center valign=top width=45>7</td>
                  <td align=left valign=top>Ronald Reagan</td>
                  <td align=center valign=top width=60>M</td>
            </tr>
            <tr class=gridrow title='Bring up my account' onClick='showMe(8)'>
                  <td align=center valign=top width=45>8</td>
                  <td align=left valign=top>Nancy Reagan</td>
                  <td align=center valign=top width=60>F</td>
            </tr>
            </table>
      </div>
</div>
Below the Grid Container
</body>
</html>

OK, the data in there is hardcoded, but again, they can easily be built using server side scripting from a list/database.

i.e (ASP).

Set rs = Server.CreateObject("ADODB.Recordset")
rs.Open "SELECT * FROM MrMrsPresident","govermentDSN"

Do While Not rs.EOF
%>
  <tr class=gridrow title='Bring up my account' onClick='showMe(<%=rs("ID")%>)'>
    <td align=center valign=top width=45><%=rs("ID")%></td>
    <td align=left valign=top><%=rs("Name")%></td>
    <td align=center valign=top width=60><%=rs("Gender")%></td>
  </tr>
<%
    rs.MoveNext
  Loop

  rs.Close
  Set rs = Nothing
%>

Hope that kind of clear things a bit.

For your highlighting when clicked (assuming your function when the row is clicked is going to open another window), you can do the following:

1. add another style sheet class
gridrowh {
      font:8pt arial,helvetica;
      background-color:HIGHLIGHT;
      color:HIGHLIGHTTEXT;
      cursor:hand;
}

2. add an id tag to each table row (data row)
   <tr id=dr<%=rs("ID")%> ....>

   so, the completed html will be:
   <tr id=dr1 ....>

2. change showMe() function to something like:
function showMe( recordID )
{
  var e = window.event;
  var s = e.srcElement;
  var o = findTR(s);

  if (o)
  {
    o.className = 'gridrowh';
  }
  popup = window.open('showme.asp?ID='+recordID,'Viewer','....');
}

function findTR(obj)
{
  if (obj.tagName == 'BODY') return null;
  if (obj.id.substring(0,1) == 'dr') return obj;
  return findTR(obj.parentElement);
}

hmm.. it might be obj.id.substr(0,1) instead, i forgot which one is which.

anyway, that should do it... on IE4, netscape sucks :)
0
 

Author Comment

by:yune
Comment Utility
I tried to do the highlight thing like what u've suggested, but then...I found that although the o.className change from 'gridrow' to 'gridrowh', but it still
do not highlight the row I've selected.  I dunno what's wrong..I tried to printout the value of o.className and I found that the value is 'gridrowh' but it's still not highlight the row, y?
0
 
LVL 6

Expert Comment

by:PBall
Comment Utility
gridrowh {
font:8pt arial,helvetica;
background-color:HIGHLIGHT;
color:HIGHLIGHTTEXT;
cursor:hand;
}

Did you add the above line inside the <style> </style> part?

The way the highlighter work is when you click on a <TR that has an id starting w/ letters drXXXX, it will change that row's class to gridrowh.

Hmm..can it be the color, try changing background-color in gridrowh to something else.. not sure what the problem is.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:yune
Comment Utility
Hello, PBall.
Yes, yes, I've done everything...but, the highlight part still not working.
When I clicked on the <TR that has an id starting w/ drXXX, it has
changed the row's class to the gridrowh..just that somehow it did not reflect on
the screen...I dunno y  n what's the problem??

Maybe u can answer me on this:
I've this code written:

<html>
<head>
<style>
      #gridContainer {
      width:320px;
      border:2px inset THREEDHIGHLIGHT;
      }
      #gridIContainer {
      width:100%;
      height:100px;
      overflow:auto;
      background-color:THREEDFACE;
      }
      #gridHeading {
      font:bold 8pt arial,helvetica;
      background-color:THREEDFACE;
      color:BUTTONTEXT;
      }
     
      gridrowh {                        //I tried both #gridrowh and gridrow, still not working
      font:8pt arial,helvetica;
      background-color:HIGHLIGHT;
      color:HIGHLIGHTTEXT;         //I tried to change the background color                        cursor:hand;                                 to red...still cannot..the same go to color..
      }

      heading {
      border:1px outset THREEDHIGHLIGHT;
      }
     
      gridrow {
      font:8pt arial,helvetica;
      background-color:WINDOW;
      color:WINDOWTEXT;
      cursor:hand;
      }
     
</style>
<title>New Page 1</title>
<script>
function ShowMe()
{
        var e = window.event;
        var s = e.srcElement;
        var o = findTR(s);

        if (o)
        {
          o.className = 'gridrowh';
         alert(o.className);    //when i clicked on the row contains id=drXXX, I get the alert         alert(o.id);                     message: gridrowh and anothe alert message: drXXX
                        
        }
}
   
function findTR(obj)
{
        if (obj.tagName == 'BODY') return null;
      
      if (obj.id.substring(0,2) == 'dr') return obj;  
            return findTR(obj.parentElement);
}  
</script>
</head>

<body onClick="ShowMe()">   <--!  I tried to put the onClick event here
                            as well as in the tr tag, both produce the
                            same result -->  

<p>Above the Grid Container </p>
<div id="gridContainer">

<table id="gridHeading" width="100%" cellpadding="0" cellspacing="1" border="0">
  <tr>
    <td class="heading" align="center" valign="top" width="45">No.</td>
    <td class="heading" align="left" valign="top">Name</td>
    <td class="heading" align="left" valign="top" width="73">Gender</td>
  </tr>
</table>
<div id="gridIContainer">

<table width="100%" cellpadding="0" cellspacing="1" border="0">
  <tr class="gridrow" id="dr1" title="Bring up my account">
    <td align="center" valign="top" width="45">1</td>
    <td align="left" valign="top">George Washington</td>
    <td align="center" valign="top" width="60">M</td>
  </tr>
      ....
      ....
      ....
</table>
</div></div>

<p>Below the Grid Container </p>

<p>&nbsp;</p>
</body>
</html>





0
 

Author Comment

by:yune
Comment Utility
Hello PBall or someone...pls help...
0
 
LVL 6

Expert Comment

by:PBall
Comment Utility
Sorry for the long delay, is it long? hehe.

Anyhow, I've noticed that I did make some mistake on the stylesheet.

The gridrow, heading, and gridrowh is for classes, but i forgot to put the . prefix.

they should be:

gridrow {
 ....
}

gridrowh {
 ....
}

heading {
 ....
}

Tested and it worked ... on IE hehe.

Should I submit as answer?
0
 

Author Comment

by:yune
Comment Utility
Hi Pball.
I still found that doesn't work although I add '#' to gridrow, gridrowh and heading

I put like this:
#gridrowh{
..
}

#gridrow{
..
}

There might be something wrong with my code if you ever do this and it works for IE....
Can u have a look of my code above and try to exevute it to see the problems?
Thanks.
0
 
LVL 6

Expert Comment

by:PBall
Comment Utility
eh..looks like I did not forgot anything.
Experts Exchange for some reason or another stripped my dot from in front gridrowh and gridrow.

Again, the style sheets should be (replace <dot> with real dot (period):

<dot>gridrow {
:
:
}

<dot>gridrowh {
:
:
}

The . prefix is necessary to specify that that style is a class name, just like # is for id, and the one w/ no prefix = tag

If you have .gridrowh and .gridrow, the code should work.  Remember to not put the dot inside the tag tho.

In the tag they should be:

<TR class=gridrow ....>

and not

<TR class=.gridrow ....>

Hope that helps...

0
 

Author Comment

by:yune
Comment Utility
yes...it works.
PBall, u can claim your points now...but 1 more question: do u know how to do it so NS will work too?
Anyway, you can claim your points..
0
 
LVL 6

Accepted Solution

by:
PBall earned 200 total points
Comment Utility
Hehe, I don't do have enough experience using Netscape CSS / DHTML.  I guess it does not work with Netscape, you might need an altogether different code for it, perhaps the layer tag and style overflow:auto will do it.  Not sure.  Sorry.

Anyway, claiming point.
0
 

Author Comment

by:yune
Comment Utility
Thanks PBall for helping.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now