table.tablesorter edit and delete links

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').addClass('hover');
                      $(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
                      $(this).children('td').removeClass('hover');
                      $(this).children('td:nth-child(2)').find('p.links').remove();
                 }
               );

I saw one solution on StackOverFlow that did this:

$('table.tablesorter tbody tr').hover(
     function() {  // mouseover
          $(this).find('.myControls').fadeIn();
     },
     function() {  // mouseout
          $(this).find('.myControls').fadeOut();
     }
   );


But I have no idea what the css and html part is for mycontrols.    Can anyone help with this?
theideabulbAsked:
Who is Participating?
 
Steve KrileConnect With a Mentor Commented:
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>
</tr>


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

$("tr").each(function(){
    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.
0
 
Steve KrileCommented:
The first function you show looks great to me.

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

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



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
                      $(this).children('td').addClass('hover');
                      //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
                      $(this).children('td').removeClass('hover');
                      //remove the paragraph object from the DOM
                      $(this).children('td:nth-child(2)').find('p.links').remove();
                 }
               );

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

0
 
theideabulbAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.