Question

I have the following html code:

<table id="MatrixTable">
    <tr>
        <td id="321"> 0 </td>
    </tr>
</table

A. How can I replace the ‘0’ text with an hyperlink when mouseover with jQuery like the following:

<table id="MatrixTable">
    <tr>
        <td id="321"> 
            <a class="modal-dialog-link" href="Edit?matrixID=321" updatefunction="UpdateMatrix">
                0
            </a>
        </td>
    </tr>
</table>

$("table#MatrixTable td").mouseover(function () {
    // doing something here...
});

B. How can I come back to the original ‘0’ when mouseleave with jQuery like the following:

$("table#MatrixTable td").mouseleave(function () {
    // doing something here...
});

Thanks.

Answer 1

You can use hover to bind an event handler to the mouseenter and mouseleave events, and you can use wrap and unwrap to wrap the contents in an a element:

​$("#321").hover(function() {
    $(this).contents().wrap("<a>"); 
}, function() {
    $(this).find("a").contents().unwrap();   
});​​​​​

Here’s a working example. Inspect the DOM to see the changes as you hover over the element.

This seems like a very strange way to use a link though… why can’t the link always be in the DOM?