table.tablesorter  edit and delete links

Posted on 2011-04-22
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
    LVL 16

    Expert Comment

    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

    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

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery ( 1.6 introduces .prop() ( and .removeProp() ( methods which allow modifying or removi…
    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    The viewer will learn how to dynamically set the form action using jQuery.
    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)

    794 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now