Clickable table rows using Jquery

[eluser]danfloun[/eluser]
Anyone know if there is a function of jquery to allow clickable rows?

Thanks

[eluser]Matthew Pennell[/eluser]
You mean a 'click to highlight/unhighlight' sort of thing? There's this plugin, or you could do it yourself - should be pretty simple, try this (untested):

Code:

$('tr').click(function () {
  $(this).toggleClass('hilite');
});

Then you just need a CSS class of .hilite:

Code:

tr.hilite td {
  background: #f00;
  color: #fff;
}

[eluser]danfloun[/eluser]
Hey thx for that, but no.

Lets say I have a table that prints the results of my database.
The table lists company details e.g. phone number email address etc.

If you click a particular row it takes you to the company page with more info.

So basically I would like the rows to be clickable so that it takes you to an url using the id of the company.

I know it takes javascript at least, but was hoping jquery would help here.

Does that make sence?

[eluser]huggiebear[/eluser]
I jont know a single thing about jQuery apart from the fact that it's a JavaScript library, but from your previous post, I'd be inclined to think that you don't need JavaScript at all, just an HTML link tag.

In pure php it would look like this:

Code:

echo "<a href='company_info.php?id=" . $company_id . "' alt='Company details'>";

Regards
Huggie

[eluser]Matthew Pennell[/eluser]
Yes, you don't need jQuery to create a simple link! To make the whole row clickable, you need to put the same A tag in every cell, and set them to "display: block" so the entire cell is clickable.

[eluser]xwero[/eluser]
Making a whole row clickable can lead to confusion, it's better you provide a visible link.

But if you want to make a row clickable you should at least have the url. then you can do something like this

Code:

$('td').contains('http://').each(function(){
  var self = $(this);
  self.parent().bind('click',function(){
    [removed].href = self.text();
  });
});

It is untested but it should work. A jquery guru would write this in one line i guess

[eluser]danfloun[/eluser]
[quote author="xwero" date="1188865990"]Making a whole row clickable can lead to confusion, it's better you provide a visible link.

But if you want to make a row clickable you should at least have the url. then you can do something like this

Code:

$('td').contains('http://').each(function(){
  var self = $(this);
  self.parent().bind('click',function(){
    [removed].href = self.text();
  });
});

It is untested but it should work. A jquery guru would write this in one line i guess [/quote]

I thank you for that. I will go and test it.

I don't think using this method is confusing if the row has an onhover function to change the row colour. This makes it very obvious in IMHO.

[eluser]danfloun[/eluser]
Well I simply pulled a few jquery plugins together for the clicking and styling.

I used TableSorter to create sortable data via column clicks.
TableHover to change the row colour on hover to make it easier to see.
I used the jquery function:

Code:

$(".resTable tr:even").addClass('even');

to alternate row colours.

And to make my rows clickable I simply used:

Code:

function Link(url)
  {
  document.location.href = url;

  }

and then on my looping table rows I used:

Code:

onclick="Link('client_detail/<?=$row->id?>');">

Works a treat.
Thanks for all your help.

Danny

[eluser]danfloun[/eluser]
On a side note, I'm having a little trouble.
In my css I have defined tr.over & tr.even which are called via javascript upon document.ready

However, with the row colours being set in css, when I use either hover or mouseover on the rows the colour does not change. If I remove the default tr row colour from css it works.

So basically, if I have a default colour specified in the style sheet, then the hover or mouseover functions take no effect!!

Has anyone any ideas why this is happening, I thought the whole idea of the jquery .addclass was to errr .addclass and I thought it would be of no use if it can't override the css.

Thanks

[eluser]Matthew Pennell[/eluser]
[quote author="danfloun" date="1188876040"]
And to make my rows clickable I simply used:

Code:

function Link(url)
  {
  document.location.href = url;

  }

and then on my looping table rows I used:

Code:

onclick="Link('client_detail/<?=$row->id?>');">

[/quote]
I really don't see the point of using JavaScript to create links - what's wrong with using a simple anchor tag?