2

I have got this table:

<table>
  <tr>
    <th>Name</th>
    <td>Paul Stevenson</td>
  </tr>
    <tr>
    <th>Date</th>
    <td>28. 09. 1978</td>
  </tr>
</table>

And I want to add some functions to my table:

var toolbar = $("<div />").css({
  "padding": "5px",
  "background" : "#F8F8F8",
  "position" : "absolute",
  "borderRadius" : "5px",
})
var link = $("<a />").css({
    "display" : "block",
    "height" : "17px",
    "width" : "17px",
    "position" : "relative"}).on("click", function() {
  $(this).animate({bottom: "-2px"}, 20 ).animate({bottom: "0"}, 20 );
});

Here is toolbar and link. Toolbar should append on mouse enter and it has a link inside it.

    $('th').on("mouseenter mouseleave", function(e) {
          if (e.type === 'mouseenter') { $(this).append( toolbar ); }
          else { $(this).find( $("div") ).remove() }
        });

toolbar.html( gmaps );

There are more types of link types. I make it like this

var gmaps = link.css({ "background" : "red",});
var google = link.css({"background" : "blue",});

How can I make append more link types?

toolbar.html( gmaps + google );

Doesn't work. Here is codepen

1 Answer 1

1

You need to make few modifications to your code as follows:

1) Create the multiple link object via $.clone() to avoid overwriting same DOM element like:

var gmaps = link.clone().css({ "background" : "red",});
var google = link.clone().css({"background" : "blue",});

2) While adding these links to toolbar; go for $.append() function call so that it will get appended at the bottom of same container as follows:

toolbar.append( gmaps ).append( google ); 

Please have a look at complete source code at updated codepen link:

http://codepen.io/anon/pen/Mepzxd?editors=0010

2
  • Good, but I have many types of links, is it necesary to still repeat append? Commented Jun 29, 2016 at 10:41
  • @KarolinaTicha - Yes, By calling var gmaps = we are just creating a javascript variable. By calling append we are attaching it into the DOM.
    – vijayP
    Commented Jun 29, 2016 at 10:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.