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=\"calenda r\" onMouseOver=\"j avascript:track TableHighlight( event, '#daFAFA');\"
onMouseOut=\"ja vascript:highli ghtTableRow(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=\"calenda r\" onMouseOver=\"j avascript:track TableHighlight( event, '#daFAFA');\"
onMouseOut=\"ja vascript:highli ghtTableRow(0); \">";
echo "<tr id=\"header\" bgcolor=\"$bgco lor2\">"
."<td align=\"center\ " class=\"list\"> "._EVENTDAT E."</td>"
."<td align=\"center\ " class=\"list\"> "._CODE."</td>"
."<td align=\"center\ " class=\"list\"> "._EVENTNAM E."</td>"
."<td align=\"center\ " class=\"list\"> "._EVENTTIM E."</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($d b->sql_query("SEL ECT eid FROM ".$prefix."_eve nt_user_temp WHERE eid=$eid"));
$confirm = $db->sql_numrows($d b->sql_query("SEL ECT eid FROM ".$prefix."_eve nt_user WHERE eid=$eid"));
$available = $vacancy-($confirm+$temp );
// display qurey data to table
echo "<tr bgcolor=\"".$bg color."\">"
."<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?nam e=event&op=join &eid=$eid\"><im g src=\"images/join1.gif\" alt=\""._JOINEV ENT."\" title=\""._JOIN EVENT."\" border=\"0\"></a>";
if ($active == 1) {
$active = "<img src=\"images/active.gif\" alt=\""._EVENTA CTIVE."\" title=\""._EVEN TACTIVE."\" border=\"0\" width=\"16\" height=\"16\">" ;
} elseif ($active == 0) {
$active = "<img src=\"images/notactive.gif\" alt=\""._EVENTN OTACTIVE."\" title=\""._EVEN TNOTACTIVE."\" border=\"0\">";
}
echo "<font class=\"content \">&nbsp;$activ e</a> ";
echo "<a href=\"/modules.php?nam e=event&op=info &eid=$eid\"><im g 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?nam e=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="gotoUR L(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):
[CODE=javascript]function gotoURL(td) {
var link = td.getElementsB yTagName("a")[1];
window.location .href = link.href;
}[/CODE]

[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="gotoUR L(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):
[CODE=javascript]function gotoURL(td) {
var link = td.getElementsB yTagName("a")[1];
window.location .href = link.href;
}[/CODE]

Hi acoder,

Thanks for the help, I put the function in the tableH.js and put the onclick="gotoUR L(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="gotoUR L(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 trackTableHighl ight, then find the TR node using code similar to the one found in hightlightTable Row:
[CODE=javascript]while (myElement && ((myElement.tag Name && myElement.tagNa me!="TR") || !myElement.tagN ame))
{
myElement=myEle ment.parentNode ;
}[/CODE]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 trackTableHighl ight, then find the TR node using code similar to the one found in hightlightTable Row:
[CODE=javascript]while (myElement && ((myElement.tag Name && myElement.tagNa me!="TR") || !myElement.tagN ame))
{
myElement=myEle ment.parentNode ;
}[/CODE]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?nam e=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?nam e=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=\"gotoU RL(this);\" bgcolor=\"".$bg color."\">"[/PHP]

[osward]

Let's try the easy way first. On line 38, try:
[PHP]echo "<tr onclick=\"gotoU RL(this);\" bgcolor=\"".$bg color."\">"[/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=\"gotoU RL(this);\" bgcolor=\"".$bg color."\">"
."<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=\"calenda r\" onMouseOver=\"j avascript:track TableHighlight( event, '#daFAFA');\"
onMouseOut=\"ja vascript:highli ghtTableRow(0); \" onclick=\"javas cript:gotoURL(e vent, '#daFAFA', 'this');\">";
echo "<tr id=\"header\" bgcolor=\"$bgco lor2\">"
."<td align=\"center\ " class=\"list\"> "._EVENTDAT E."</td>"
//."<td align=\"center\ " class=\"list\"> <a href=\"/modules.php?nam e=event&order=A _date\"><img src=\"images/asc.gif\" alt=\""._SORTAS C."\" title=\""._SORT ASC."\" border=\"0\"></a>&nbsp;"._EVEN TDATE."&nbsp;<a href=\"/modules.php?nam e=event&order=D _date\"><img src=\"images/desc.gif\" alt=\""._SORTDE SC."\" title=\""._SORT DESC."\" border=\"0\"</a></td>"
."<td align=\"center\ " class=\"list\"> "._CODE."</td>"
."<td align=\"center\ " class=\"list\"> "._EVENTNAM E."</td>"
."<td align=\"center\ " class=\"list\"> "._EVENTTIM E."</td>"
."<td align=\"center\ " class=\"list\"> "._PLACE."</td>"
//."<td align=\"center\ " class=\"list\"> <a href=\"/modules.php?nam e=event&order=A _place\"><img src=\"images/asc.gif\" alt=\""._SORTAS C."\" title=\""._SORT ASC."\" border=\"0\"></a>&nbsp;"._PLAC E."&nbsp;<a href=\"/modules.php?nam e=event&order=D _place\"><img src=\"images/desc.gif\" alt=\""._SORTDE SC."\" title=\""._SORT DESC."\" 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($d b->sql_query("SEL ECT eid FROM ".$prefix."_eve nt_user_temp WHERE eid=$eid"));
$confirm = $db->sql_numrows($d b->sql_query("SEL ECT eid FROM ".$prefix."_eve nt_user WHERE eid=$eid"));
$available = $vacancy-($confirm+$temp );
// display qurey data to table
echo "<tr onclick=\"gotoU RL(this);\" bgcolor=\"".$bg color."\">"
."<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?nam e=event&op=join &eid=$eid\"><im g src=\"images/join1.gif\" alt=\""._JOINEV ENT."\" title=\""._JOIN EVENT."\" border=\"0\"></a>";
if ($active == 1) {
$active = "<img src=\"images/active.gif\" alt=\""._EVENTA CTIVE."\" title=\""._EVEN TACTIVE."\" border=\"0\" width=\"16\" height=\"16\">" ;
} elseif ($active == 0) {
$active = "<img src=\"images/notactive.gif\" alt=\""._EVENTN OTACTIVE."\" title=\""._EVEN TNOTACTIVE."\" border=\"0\">";
}
echo "<font class=\"content \">&nbsp;$activ e</a> ";
echo "< a href=\"/modules.php?nam e=event&op=info &eid=$eid\"><im g 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="gotoUR L(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.