[Last Call] Learn how to a build a cloud-first strategyRegister Now


table.tablesorter  edit and delete links

Posted on 2011-04-22
Medium Priority
Last Modified: 2012-05-11
I see people use the table.tablesorter jquery function to add little Edit and Delete links to each row, I am just wondering how you make this dynamic for many pages using the same hover in the css.    You might want to use this in categories, products, blog posts, all within the same CMS.

Here is the basic code I am talking about:

$('table.hover tbody tr').hover(
                 function() {  // mouseover
                      $(this).children('td:nth-child(2)').append('<p class="links"><a href="#">Edit</a><a href="#">Preview</a><a href="#">Delete</a></p>');
                 function() {  // mouseout

I saw one solution on StackOverFlow that did this:

$('table.tablesorter tbody tr').hover(
     function() {  // mouseover
     function() {  // mouseout

But I have no idea what the css and html part is for mycontrols.    Can anyone help with this?
Question by:theideabulb
  • 2
LVL 16

Expert Comment

by:Steve Krile
ID: 35450025
The first function you show looks great to me.

You need a css class for "hover" and "p.links" that would be something like

   .hover {background-color:#ffc;}
   p.links {position:absolute; top: 0px;right: 0px;width:100px;background:#fff;border:solid 1px gray;}

Here is a commented version of your code:

//loop through all TR tags in the table.hover object
//wire up a hover event
$('table.hover tbody tr').hover(
       //on mouse over
                 function() {  // mouseover
                      //add the hover class to each TD in the row
                      //based on the structure of your rows, this may not be correct, but this line
                     //is supposed to add a paragraph to the last cell.  But looking at it, this is a mistake.
                      //I would do it slightly different - see other code
                      $(this).children('td:nth-child(2)').append('<p class="links"><a href="#">Edit</a><a href="#">Preview</a><a href="#">Delete</a></p>');
                 function() {  // mouseout
                      //as the mouse leaves, remove the hover class from each TD
                      //remove the paragraph object from the DOM

Open in new window

And here is my revision.  The original code uses .append() but doesn't use a jquery object - tries just to put quotes around HTML.  This will not work.  The below does work.
                      $(this).children('td:nth-child(2)').append($("<p class=\"links\"><a href=\"#\">Edit</a><a href=\"#\">Preview</a><a href=\"#\">Delete</a></p>"));

Open in new window


Author Comment

ID: 35450110
Maybe I am not understanding you answer, or maybe I did not explain my question good enough.

The problem I have is how can the links that its displaying, be used for more than one page?

If I have a table displaying products, the edit link might be:   edit_product.cfm?id=123,  

Then i might want to have the table like this on my category page, so it would be:  edit_category.cfm?id=2

etc, etc.  

I don't see how this can be used on many pages to edit or delete content.
LVL 16

Accepted Solution

Steve Krile earned 2000 total points
ID: 35450164
Ah.  Gotcha.  What I've done in the past is when my table is being rendered (and I'm not clear whether you are using java or server to do that - doesn't matter really) I make use of the "data-" attribute.  Like this:

<tr data-id="1121">
   <td>cell 1</td>
   <td>cell 2</td>

Then, after you have selected that dom object, you can get the ID as an attribute.

    var id = $(this).attr("data-id");

That's the theory. In your case, you want to grab that with a hover command.  Not a problem.  Since you are wiring the .hover() method to the row, you can grab the data-id attribute in the hover commands and then write the ID to the controls you are .append() ing.

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 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