ui button display on hover

display a (minified) jquery ui button when a <td> is hovered over

by RobertSudwarts

HTML

<table>
    <tr>
        <td>rw1 col1</td> <td class="rh">rw1 col2</td>
    </tr>
    <tr>
        <td>rw2 col1</td> <td class="rh">rw2 col2</td>
    </tr>
</table>

CSS

.ui-button.mini-button {
    font-size: 10px;
    padding: 0px;
}

table {border-width: 1px; margin: 20px;} 
td {
    border-width: 1px;
	padding: 12px;
    border-color: gray;
    border-style: solid;
}

JavaScript

$("table tr td:last-child").hover(

    function () {
        $(this).append($("<span> <button class='mini-button'></button> </span>"));
        $(function () {
            $("button").button({
                "text": false,
                    "icons": {
                    "primary": "ui-icon-trash"
                },
                    "label": "delete"
            });
        });
    },

    function () {
        $(this).find("button:last").remove();
        $(this).find("span:last").remove();
    }
);