Hi,
I noticed that this solution actually didn't work properly with rows
containing exactly one link. I traced this to some odd event bubbling
behavior, and did some major surgery to fix it. I have tested this code in
Safari and Firefox. Please let me know if you encounter problems in other
browsers.
I also changed the mouse pointer from an hourglass (???) to a hand.
Here's the code, and I'll update Jira, too:
function highlightTableRows(tableId) {
var previousClass = null;
var table = document.getElementById(tableId);
var tbody = table.getElementsByTagName("tbody")[0];
var rows;
if (tbody == null) {
rows = table.getElementsByTagName("tr");
} else {
rows = tbody.getElementsByTagName("tr");
}
// add event handlers so rows light up and are clickable
for (i=0; i < rows.length; i++) {
rows[i].onmouseover = function() {
previousClass=this.className;this.className+=' over' };
rows[i].onmouseout = function() { this.className=previousClass };
// GE: Added conditional to prevent whole row from becoming a link
when more than
// one link is present in the row. Also, gets the first link in the
entire column
// rather than the first link in the first row. Also, changed
cursor style to
// from 'wait' (an hourglass) to 'pointer' (a hand).
if(rows[i].getElementsByTagName("a").length == 1)
{
rows[i].onclick = function(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
var elem
if (evt.target) {
elem = (evt.target.nodeType
== 3) ? evt.target.parentNode :
evt.target
} else {
elem = evt.srcElement
}
if (elem) {
var nodeName =
elem.nodeName.toLowerCase();
var link;
if(nodeName == 'a')
{
link = elem;
}
else
{
while(nodeName != 'tr')
{
elem = elem.parentNode;
nodeName =
elem.nodeName.toLowerCase();
}
link =
elem.getElementsByTagName('a')[0];
}
if (link.onclick) {
var call =
link.getAttribute("onclick");
if (call.indexOf("return ")
== 0) {
call = call.substring(7);
}
// this will not work for
links with onclick handlers
that return false
eval(call);
} else {
location.href =
link.getAttribute("href");
}
this.style.cursor="pointer";
}
}
return false;
}
}
}
}
gederer wrote:
>
> Hi,
>
> The highlightTableRows function in global.js causes an entire row of a
> table to link to the href of the first anchor in the first cell in the row
> if the first cell contains an anchor. So, if the table looks like:
>
> <table>
> <tr>
> <td> mylink.html My Link </td>
> <td>Something here</td>
> <td> myOtherLink.html My Other Link </td>
> </tr>
> </table>
>
> then the whole row is linked to mylink.html, and clicking on 'My Other
> Link' goes to mylink.html instead of myOtherLink.html.
>
> I changed this so that a) If there is more than one link in the entire
> row, it doesn't assign any onclick behavior to the row so each individual
> link works; b) If there is exactly one link in the row, it uses that link
> even if it is not in the first column.
>
> Here's the code in case anyone's interested:
>
> function highlightTableRows(tableId) {
> var previousClass = null;
> var table = document.getElementById(tableId);
> var tbody = table.getElementsByTagName("tbody")[0];
> var rows;
> if (tbody == null) {
> rows = table.getElementsByTagName("tr");
> } else {
> rows = tbody.getElementsByTagName("tr");
> }
> // add event handlers so rows light up and are clickable
> for (i=0; i < rows.length; i++) {
> rows[i].onmouseover = function() {
> previousClass=this.className;this.className+=' over' };
> rows[i].onmouseout = function() { this.className=previousClass };
> // GE: Added conditional to prevent whole row from becoming a link
> when more than
> // one link is present in the row. Also, gets the first link in
> the entire row
> // rather than the first link in the first row.
> if(rows[i].getElementsByTagName("a").length == 1)
> {
> rows[i].onclick = function() {
> var link = rows[i].getElementsByTagName("a")[0];
> if (link.onclick) {
> call = link.getAttribute("onclick");
> if (call.indexOf("return ") == 0) {
> call = call.substring(7);
> }
> // this will not work for links with onclick handlers
> that return false
> eval(call);
> } else {
> location.href = link.getAttribute("href");
> }
> this.style.cursor="wait";
> return false;
> }
> }
> }
> }
>
> Cheers,
>
> Greg
>
--
View this message in context:
http://www.nabble.com/Solution%3A-Individual-links-in-displaytag-table-cells-tf4604608s2369.html#a13161046
Sent from the AppFuse - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
