How to let a highlighted row open the url from a database table

[osward]

Hello everyone,

I am totally new to javascript, here is my situation:

I had a php document that returns a quered database table and I use a javescript download from the web to highlighed the row of the table. I echoed the script and in the <table> tag I added [PHP]echo "<script type=\"text/javascript\" src=\"/modules/event/lib/tableH.js\"></script>";
echo "<table id=\"listing\" width=\"100%\" cellpadding=\"2\" cellspacing=\"0\" class=\"calendar\" onMouseOver=\"javascript:trackTableHighlight(event , '#daFAFA');\"
onMouseOut=\"javascript:highlightTableRow(0);\">";[/PHP]That is fine for me so far.

I had a field in my table that send user to another page. What I want to do is when user click on the highlighted row, using that field's url and sends user to that page.

I know that shouldn't be difficult but I have no idea where to start or lookup. Would anyone please set me a direction to accomplish this.

Thanks in advance

Osward

[acoder]

Post an example of a table row including the field which contains the URL.

[osward]

Hi,

Following is the code of my table[PHP]echo "<script type=\"text/javascript\" src=\"/modules/event/lib/tableH.js\"></script>";
$bgcolor = "$bgcolor3"; // set alternative row color
echo "<table id=\"listing\" width=\"100%\" cellpadding=\"2\" cellspacing=\"0\" class=\"calendar\" onMouseOver=\"javascript:trackTableHighlight(event , '#daFAFA');\"
onMouseOut=\"javascript:highlightTableRow(0);\">";
echo "<tr id=\"header\" bgcolor=\"$bgcolor2\">"
."<td align=\"center\" class=\"list\">"._EVENTDATE."</td>"
."<td align=\"center\" class=\"list\">"._CODE."</td>"
."<td align=\"center\" class=\"list\">"._EVENTNAME."</td>"
."<td align=\"center\" class=\"list\">"._EVENTTIME."</td>"
."<td align=\"center\" class=\"list\">"._PLACE."</td>"
."<td align=\"center\" class=\"list\">"._HOST."</td>"
."<td align=\"center\" class=\"list\">"._COST."</td>"
."<td align=\"center\" class=\"list\">"._VACANCY."</td>"
."<td align=\"center\" class=\"list\">"._STATUS."</td>"
."</tr>";
// show data in table with while loop
while ($row = $db->sql_fetchrow($result)) {
if ($bgcolor == "$bgcolor3"){
$bgcolor = "$bgcolor1";
}else{
$bgcolor = "$bgcolor3";
}
$eid = $row['eid'];
$code = $row['code'];
$title = $row['title'];
$date = $row['date'];
$time = $row['time'];
$place = $row['place'];
$cost = $row['cost'];
$host = $row['host'];
$vacancy = $row['vacancy'];
$active = $row['active'];
// Caculate actual available vacancy
$temp = $db->sql_numrows($db->sql_query("SELECT eid FROM ".$prefix."_event_user_temp WHERE eid=$eid"));
$confirm = $db->sql_numrows($db->sql_query("SELECT eid FROM ".$prefix."_event_user WHERE eid=$eid"));
$available = $vacancy-($confirm+$temp);
// display qurey data to table
echo "<tr bgcolor=\"".$bgcolor."\">"
."<td align=\"center\" class=\"list\">$date</td>"
."<td align=\"center\" class=\"list\">$code</td>"
."<td align=\"center\" class=\"list\">$title</td>"
."<td align=\"center\" class=\"list\">$time</td>"
."<td align=\"center\" class=\"list\">$place</td>"
."<td align=\"center\" class=\"list\">$host</td>"
."<td align=\"center\" class=\"list\">$cost</td>"
."<td align=\"center\" class=\"list\">$available</td>";
echo "<td align=\"center\" class=\"list\"><font class=\"content\"><a href=\"/modules.php?name=event&op=join&eid=$eid\"><img src=\"images/join1.gif\" alt=\""._JOINEVENT."\" title=\""._JOINEVENT."\" border=\"0\"></a>";
if ($active == 1) {
$active = "<img src=\"images/active.gif\" alt=\""._EVENTACTIVE."\" title=\""._EVENTACTIVE."\" border=\"0\" width=\"16\" height=\"16\">";
} elseif ($active == 0) {
$active = "<img src=\"images/notactive.gif\" alt=\""._EVENTNOTACTIVE."\" title=\""._EVENTNOTACTIVE."\" border=\"0\">";
}
echo "<font class=\"content\">&nbsp;$active</a> ";
echo "<a href=\"/modules.php?name=event&op=info&eid=$eid\"><img src=\"images/view.gif\" alt=\""._SHOW."\" title=\""._SHOW."\" border=\"0\" width=\"13\" height=\"13\"></a></font</td></tr>";
} // close while loop
echo "</table></center>"[/PHP]at line 54 <a href=\"/modules.php?name=event&op=info&eid=$eid\"> is the link I want to access when I click on the highlighted row.

I think I need to add a function to the tableH.js to make this happen but I don't know how to achieve it.

Any idea?

Below is the tableH.js//

F. Permadi 2005.
// Highlights table row
// Copyright (C) F. Permadi
// This code is provided "as is" and without warranty of any kind.  Use at your own risk.
 
 
 
// These variables are for saving the original background colors
var savedStates=new Array();
var savedStateCount=0;
 
/////////////////////////////////////////////////////
// This function takes an element as a parameter and 
//   returns an object which contain the saved state
//   of the element's background color.
/////////////////////////////////////////////////////
function saveBackgroundStyle(myElement)
{
  saved=new Object();
  saved.element=myElement;
  saved.className=myElement.className;
  saved.backgroundColor=myElement.style["backgroundColor"];
  return saved;   
}
 
/////////////////////////////////////////////////////
// This function takes an element as a parameter and 
//   returns an object which contain the saved state
//   of the element's background color.
/////////////////////////////////////////////////////
function restoreBackgroundStyle(savedState)
{
  savedState.element.style["backgroundColor"]=savedState.backgroundColor;
  if (savedState.className)
  {
    savedState.element.className=savedState.className;    
  }
}
 
/////////////////////////////////////////////////////
// This function is used by highlightTableRow() to find table cells (TD) node
/////////////////////////////////////////////////////
function findNode(startingNode, tagName)
{
  // on Firefox, the TD node might not be the firstChild node of the TR node
  myElement=startingNode;
  var i=0;
  while (myElement && (!myElement.tagName || (myElement.tagName && myElement.tagName!=tagName)))
  {
    myElement=startingNode.childNodes[i];
    i++;
  }  
  if (myElement && myElement.tagName && myElement.tagName==tagName)
  {
    return myElement;
  }
  // on IE, the TD node might be the firstChild node of the TR node  
  else if (startingNode.firstChild)
    return findNode(startingNode.firstChild, tagName);
  return 0;
}
 
/////////////////////////////////////////////////////
// Highlight table row.
// newElement could be any element nested inside the table
// highlightColor is the color of the highlight
/////////////////////////////////////////////////////
function highlightTableRow(myElement, highlightColor)
{
  var i=0;
  // Restore color of the previously highlighted row
  for (i; i<savedStateCount; i++)
  {
    restoreBackgroundStyle(savedStates[i]);          
  }
  savedStateCount=0;
 
  // To get the node to the row (ie: the <TR> element), 
  // we need to traverse the parent nodes until we get a row element (TR)
  // Netscape has a weird node (if the mouse is over a text object, then there's no tagName
  while (myElement && ((myElement.tagName && myElement.tagName!="TR") || !myElement.tagName))
  {
    myElement=myElement.parentNode;
  }
 
  // If you don't want a particular row to be highlighted, set it's id to "header"
  // If you don't want a particular row to be highlighted, set it's id to "header"
  if (!myElement || (myElement && myElement.id && myElement.id=="header") )
    return;
 
  // Highlight every cell on the row
  if (myElement)
  {
    var tableRow=myElement;
 
    // Save the backgroundColor style OR the style class of the row (if defined)
    if (tableRow)
    {
      savedStates[savedStateCount]=saveBackgroundStyle(tableRow);
      savedStateCount++;
    }
 
    // myElement is a <TR>, then find the first TD
    var tableCell=findNode(myElement, "TD");    
 
    var i=0;
    // Loop through every sibling (a sibling of a cell should be a cell)
    // We then highlight every siblings
    while (tableCell)
    {
      // Make sure it's actually a cell (a TD)
      if (tableCell.tagName=="TD")
      {
        // If no style has been assigned, assign it, otherwise Netscape will 
        // behave weird.
        if (!tableCell.style)
        {
          tableCell.style={};
        }
        else
        {
          savedStates[savedStateCount]=saveBackgroundStyle(tableCell);        
          savedStateCount++;
        }
        // Assign the highlight color
        tableCell.style["backgroundColor"]=highlightColor;
 
        // Optional: alter cursor
        tableCell.style.cursor='default';
        i++;
      }
      // Go to the next cell in the row
      tableCell=tableCell.nextSibling;
    }
  }
}
 
/////////////////////////////////////////////////////
// This function is to be assigned to a <table> mouse event handler.
// If the element that fired the event is within a table row,
//   this function will highlight the row.
/////////////////////////////////////////////////////
function trackTableHighlight(mEvent, highlightColor)
{
  if (!mEvent)
    mEvent=window.event;
 
  // Internet Explorer
  if (mEvent.srcElement)
  {
    highlightTableRow( mEvent.srcElement, highlightColor);
  }
  // Netscape and Firefox
  else if (mEvent.target)
  {
    highlightTableRow( mEvent.target, highlightColor);        
  }
}
 
/////////////////////////////////////////////////////
// Highlight table row.
// newElement could be any element nested inside the table
// highlightColor is the color of the highlight
/////////////////////////////////////////////////////
function highlightTableRowVersionA(myElement, highlightColor)
{
  var i=0;
  // Restore color of the previously highlighted row
  for (i; i<savedStateCount; i++)
  {
    restoreBackgroundStyle(savedStates[i]);          
  }
  savedStateCount=0;
 
  // If you don't want a particular row to be highlighted, set it's id to "header"
  if (!myElement || (myElement && myElement.id && myElement.id=="header") )
    return;
 
  // Highlight every cell on the row
  if (myElement)
  {
    var tableRow=myElement;
 
    // Save the backgroundColor style OR the style class of the row (if defined)
    if (tableRow)
    {
      savedStates[savedStateCount]=saveBackgroundStyle(tableRow);
      savedStateCount++;
    }
 
    // myElement is a <TR>, then find the first TD
    var tableCell=findNode(myElement, "TD");    
 
    var i=0;
    // Loop through every sibling (a sibling of a cell should be a cell)
    // We then highlight every siblings
    while (tableCell)
    {
      // Make sure it's actually a cell (a TD)
      if (tableCell.tagName=="TD")
      {
        // If no style has been assigned, assign it, otherwise Netscape will 
        // behave weird.
        if (!tableCell.style)
        {
          tableCell.style={};
        }
        else
        {
          savedStates[savedStateCount]=saveBackgroundStyle(tableCell);        
          savedStateCount++;
        }
        // Assign the highlight color
        tableCell.style["backgroundColor"]=highlightColor;
 
        // Optional: alter cursor
        tableCell.style.cursor='default';
        i++;
      }
      // Go to the next cell in the row
      tableCell=tableCell.nextSibling;
    }
  }
}

Regards,
Osward

[acoder]

Since you're using inline event handlers anyway, just add an onclick to the last table cell (td) in each row, e.g. onclick="gotoURL(this)".

Then in the function, just go to the URL in question (it seems as if there are two links in the td cell and we want the second one):

function gotoURL(td) {
var link = td.getElementsByTagName("a")[1];
window.location.href = link.href;
}

[osward]

Since you're using inline event handlers anyway, just add an onclick to the last table cell (td) in each row, e.g. onclick="gotoURL(this)".

Then in the function, just go to the URL in question (it seems as if there are two links in the td cell and we want the second one):

function gotoURL(td) {
var link = td.getElementsByTagName("a")[1];
window.location.href = link.href;
}

Hi acoder,

Thanks for the help, I put the function in the tableH.js and put the onclick="gotoURL(this)" inside the <table> tag. It works, but only for the first row of the table. No matter which row I click, it returns the same link as the first row.

I had tried to put the onclick="gotoURL(this) inside the <table> tag and the <td> tag that contains the link but only inside the <table> tag work as described above

Please help

Regards,
Osward

[acoder]

That's because you attached it to the table tag and not each row.

If you are going to attach it to the table tag, then you will need to find the row in question using something similar to trackTableHighlight, then find the TR node using code similar to the one found in hightlightTableRow:

while (myElement && ((myElement.tagName && myElement.tagName!="TR") || !myElement.tagName))
  {
    myElement=myElement.parentNode;
  }

Once you have the correct row, you can find the second link and change the page location.

[osward]

That's because you attached it to the table tag and not each row.

If you are going to attach it to the table tag, then you will need to find the row in question using something similar to trackTableHighlight, then find the TR node using code similar to the one found in hightlightTableRow:

while (myElement && ((myElement.tagName && myElement.tagName!="TR") || !myElement.tagName))
  {
    myElement=myElement.parentNode;
  }

Once you have the correct row, you can find the second link and change the page location.

Hi, acoder
I had tried and place the onclick at the table <tr> tag which is line 38 of my posted php script but it returns an script error at the browser and also it display < a href="/modules.php?name=event&op=info&eid=355"> before the link icon and also the icon's link is disable.

Think have to do it the hard way like you said. I had spent hours trying to make sense of the two function that I could make use of but yet couldn't figure out exactly how. Does it mean the gotoURL function needs another mEvent variable beside the td?

The following is the function I assemby but doesn't work

function gotoURL(myElement, highlightColor, td)
{
    if (!yElement)
    myElement=window.event;
 
  // Internet Explorer
  if (myElement.srcElement)
  {
    highlightTableRow( myElement.srcElement, highlightColor);
  }
  // Netscape and Firefox
  else if (myElement.target)
  {
    highlightTableRow( myElement.target, highlightColor);        
  }
  while (myElement && ((myElement.tagName && myElement.tagName!="TR") || !myElement.tagName))
  {
    myElement=myElement.parentNode;
  }
  var tableCell=findNode(myElement, "TD");    
 
    var i=0;
    // Loop through every sibling (a sibling of a cell should be a cell)
    // We then highlight every siblings
    while (tableCell)
    {
      // Make sure it's actually a cell (a TD)
      if (tableCell.tagName=="TD")
      {
        var link = td.getElementsByTagName("a")[1];
        window.location.href = link.href;
        tableCell.style.cursor='default';
        i++;
      }
      // Go to the next cell in the row
      tableCell=tableCell.nextSibling;
    }
}

If at all possible, could you assemby the function for me. I understand this is a good way of learning javascript but I really need it badly


Thanks in advance
Regards,
Osward

[acoder]

Hi, acoder
I had tried and place the onclick at the table <tr> tag which is line 38 of my posted php script but it returns an script error at the browser and also it display < a href="/modules.php?name=event&op=info&eid=355"> before the link icon and also the icon's link is disable.

Let's try the easy way first. On line 38, try:
[PHP]echo "<tr onclick=\"gotoURL(this);\" bgcolor=\"".$bgcolor."\">"[/PHP]

[osward]

Let's try the easy way first. On line 38, try:
[PHP]echo "<tr onclick=\"gotoURL(this);\" bgcolor=\"".$bgcolor."\">"[/PHP]

Doesn't work, script error. Also the field where I put the 2 links show the url I want the function to access but the orginal link gone

One additional question, how can I use the function within the same javascript?
I know how to do it in php but have no idea in javascript

I attached the sceen of the table for your reference

[acoder]

Doesn't work, script error. Also the field where I put the 2 links show the url I want the function to access but the orginal link gone

One additional question, how can I use the function within the same javascript?
I know how to do it in php but have no idea in javascript

I just tried a quick test and it works.

Can you show your updated code? It must be a misplaced quote.

By "within the same javascript", do you mean in the JavaScript file?

[osward]

I just tried a quick test and it works.

Can you show your updated code? It must be a misplaced quote.

By "within the same javascript", do you mean in the JavaScript file?

[PHP]echo "<tr onclick=\"gotoURL(this);\" bgcolor=\"".$bgcolor."\">"
."<td align=\"center\" class=\"list\">$date</td>"
."<td align=\"center\" class=\"list\">$code</td>"
."<td align=\"center\" class=\"list\">$title</td>"
."<td align=\"center\" class=\"list\">$time</td>"
."<td align=\"center\" class=\"list\">$place</td>"
."<td align=\"center\" class=\"list\">$host</td>"
."<td align=\"center\" class=\"list\">$cost</td>"
."<td align=\"center\" class=\"list\">$available</td>";[/PHP]
This is how I put the gotoURL(this), I also enclosed a screen shot in my last post

Yeah, I mean within the same javascript, how can I use or call other function?

[acoder]

What about the rest of the code (from lines 47-54 from previous code)?

If the link text is showing up, that means that the quotes are not in the right places and there aren't two links, hence the script error.

[osward]

What about the rest of the code (from lines 47-54 from previous code)?

If the link text is showing up, that means that the quotes are not in the right places and there aren't two links, hence the script error.

Here is the latest version of the code
[PHP]echo "<script type=\"text/javascript\" src=\"/modules/event/lib/tableH.js\"></script>";
$bgcolor = "$bgcolor3"; // set alternative row color
echo "<table id=\"listing\" width=\"100%\" cellpadding=\"2\" cellspacing=\"0\" class=\"calendar\" onMouseOver=\"javascript:trackTableHighlight(event , '#daFAFA');\"
onMouseOut=\"javascript:highlightTableRow(0);\" onclick=\"javascript:gotoURL(event, '#daFAFA', 'this');\">";
echo "<tr id=\"header\" bgcolor=\"$bgcolor2\">"
."<td align=\"center\" class=\"list\">"._EVENTDATE."</td>"
//."<td align=\"center\" class=\"list\"><a href=\"/modules.php?name=event&order=A_date\"><img src=\"images/asc.gif\" alt=\""._SORTASC."\" title=\""._SORTASC."\" border=\"0\"></a>&nbsp;"._EVENTDATE."&nbsp;<a href=\"/modules.php?name=event&order=D_date\"><img src=\"images/desc.gif\" alt=\""._SORTDESC."\" title=\""._SORTDESC."\" border=\"0\"</a></td>"
."<td align=\"center\" class=\"list\">"._CODE."</td>"
."<td align=\"center\" class=\"list\">"._EVENTNAME."</td>"
."<td align=\"center\" class=\"list\">"._EVENTTIME."</td>"
."<td align=\"center\" class=\"list\">"._PLACE."</td>"
//."<td align=\"center\" class=\"list\"><a href=\"/modules.php?name=event&order=A_place\"><img src=\"images/asc.gif\" alt=\""._SORTASC."\" title=\""._SORTASC."\" border=\"0\"></a>&nbsp;"._PLACE."&nbsp;<a href=\"/modules.php?name=event&order=D_place\"><img src=\"images/desc.gif\" alt=\""._SORTDESC."\" title=\""._SORTDESC."\" border=\"0\"></a></td>"
."<td align=\"center\" class=\"list\">"._HOST."</td>"
."<td align=\"center\" class=\"list\">"._COST."</td>"
."<td align=\"center\" class=\"list\">"._VACANCY."</td>"
."<td align=\"center\" class=\"list\">"._STATUS."</td>"
."</tr>";
// show data in table with while loop
while ($row = $db->sql_fetchrow($result)) {
if ($bgcolor == "$bgcolor3"){
$bgcolor = "$bgcolor1";
}else{
$bgcolor = "$bgcolor3";
}
$eid = $row['eid'];
$code = $row['code'];
$title = $row['title'];
$date = $row['date'];
$time = $row['time'];
$place = $row['place'];
$cost = $row['cost'];
$host = $row['host'];
$vacancy = $row['vacancy'];
$active = $row['active'];
// Caculate actual available vacancy
$temp = $db->sql_numrows($db->sql_query("SELECT eid FROM ".$prefix."_event_user_temp WHERE eid=$eid"));
$confirm = $db->sql_numrows($db->sql_query("SELECT eid FROM ".$prefix."_event_user WHERE eid=$eid"));
$available = $vacancy-($confirm+$temp);
// display qurey data to table
echo "<tr onclick=\"gotoURL(this);\" bgcolor=\"".$bgcolor."\">"
."<td align=\"center\" class=\"list\">$date</td>"
."<td align=\"center\" class=\"list\">$code</td>"
."<td align=\"center\" class=\"list\">$title</td>"
."<td align=\"center\" class=\"list\">$time</td>"
."<td align=\"center\" class=\"list\">$place</td>"
."<td align=\"center\" class=\"list\">$host</td>"
."<td align=\"center\" class=\"list\">$cost</td>"
."<td align=\"center\" class=\"list\">$available</td>";
echo "<td align=\"center\" class=\"list\"><font class=\"content\"><a href=\"/modules.php?name=event&op=join&eid=$eid\"><img src=\"images/join1.gif\" alt=\""._JOINEVENT."\" title=\""._JOINEVENT."\" border=\"0\"></a>";
if ($active == 1) {
$active = "<img src=\"images/active.gif\" alt=\""._EVENTACTIVE."\" title=\""._EVENTACTIVE."\" border=\"0\" width=\"16\" height=\"16\">";
} elseif ($active == 0) {
$active = "<img src=\"images/notactive.gif\" alt=\""._EVENTNOTACTIVE."\" title=\""._EVENTNOTACTIVE."\" border=\"0\">";
}
echo "<font class=\"content\">&nbsp;$active</a> ";
echo "< a href=\"/modules.php?name=event&op=info&eid=$eid\"><img src=\"images/view.gif\" alt=\""._SHOW."\" title=\""._SHOW."\" border=\"0\" width=\"13\" height=\"13\"></a></font</td></tr>";
} // close while loop
echo "</table></center>"
."<br><br>";[/PHP]One remarks, beside of the screen shot I post, the orginal highlight still works

Below is the gotoURL part in the javascript

function gotoURL(td)
{
  var link = td.getElementsByTagName("a")[1];
  window.location.href = link.href;
}

Regards,
Osward

[osward]

Hi, acoder

I found where the problem lies, there is a extra space in the second link, when I remove this space and put the onclick="gotoURL(this) within the <tr> tag and it works now.

Thanks for remind me checking the place I overlook

Regards,
Osward

[acoder]

Watch those spaces!

Glad you got it working.

Maybe next time we can work on the more advanced solution.

[osward]

Hi acoder,

The script behaves pretty weird, it work and when I close the browser and reopen it agin, It said script error. When I take away the gotoURL function, it work again.

Think we haven't really solved the problem.

Any suggestion?

Regards

Osward

[acoder]

Can you post the generated source code?

[osward]

Can you post the generated source code?

I enclosed the source.txt from my browser for your reference. It's a huge file I can't post it here

Regards,
Osward

[acoder]

I noticed that your table appears after the closing BODY and HTML tags!

I haven't tested it otherwise, but you may want to validate your page.

[osward]

I noticed that your table appears after the closing BODY and HTML tags!

I haven't tested it otherwise, but you may want to validate your page.

Hi acoder,

I notice that as well, this is the calender class that generate the html tag. I am not sure how or should I go into the class file and remove that

Any thoughts?

Regards,
Osward

[acoder]

Try getting this working on its own and then add the calendar class afterwards, i.e. make a simpler version with only the table.

[osward]

Try getting this working on its own and then add the calendar class afterwards, i.e. make a simpler version with only the table.

Hi acoder,

This is exactly what I am trying to do, I've got a test script with just the table. However, it still carries 2 pair of end tags. I don't think the problem is from the calendar class. Maybe I have to put on a default theme and see what happens but this is really a pain though

I will post my finding hopefully soon

Regards,
Osward

[acoder]

What's generating the end tags?

[osward]

I finally find out which section of my code in the php document makes additional pair of end tags. It's not the calendar class but the paging class.

After commented out this class, everything is fine now but I wonder how this class would make such a mess

[acoder]

Glad you got it working.

After commented out this class, everything is fine now but I wonder how this class would make such a mess

I think you should ask that in the PHP forum. Good luck!

[osward]

I downloaded the class form phpclasses.org and they don't have forum for their classes.

Anyhow, thanks for your paient and time to help me make it work

Regards,

Osward

[acoder]

I downloaded the class form phpclasses.org and they don't have forum for their classes.

If you try the PHP forum here, the experts there might be able to help you.