Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

click to highlght the result from a query

Posted on 1999-01-26
15
Medium Priority
?
156 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
ID: 1845664
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
ID: 1845665
Boy oh boy, that's a bit lenghty ain't it :)
0
 

Author Comment

by:yune
ID: 1845666
Hi, Pball.
How if I want to make my page viewable with NS and IE?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:yune
ID: 1845667
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
ID: 1845668
<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
ID: 1845669
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
ID: 1845670
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
 

Author Comment

by:yune
ID: 1845671
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
ID: 1845672
Hello PBall or someone...pls help...
0
 
LVL 6

Expert Comment

by:PBall
ID: 1845673
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
ID: 1845674
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
ID: 1845675
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
ID: 1845676
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 800 total points
ID: 1845677
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
ID: 1845678
Thanks PBall for helping.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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 …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

783 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