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