javascript hide show

I'm trying to do a simple hide and show function in javascript (NOT Jquery please, I want to learn); and yes I'm still learning. What I'm trying to do is Facebook and other apps that when you hover on a news feed article, there's a small X that shows that serves as an option to delete that. I'm trying to do that on tables (table cell)

here's my header function:

function showHide(id) {
    if(document.getDocumentById(id).style.visibility == 'hidden')
        document.getDocumentById(id).style.visibility = 'visible';
    else
        document.getDocumentById(id).style.visibility = 'hidden';
}

and in the body (php):

echo '<tr>';
        echo '<td class="managealbum_delete" id="managealbum_delete'.$x.'">X</td>';
        echo '<td>' . $album->title . '</td>';
     开发者_StackOverflow社区   echo '<td>' . $album->caption . '</td>';
        echo '<td style="border: 1px solid black;" onMouseOver="showHide('."'".'managealbum_delete'.$x."'".');" onMouseOut="showHide('."'".'managealbum_delete'.$x."'".');">' . $album->media . '</td>';
        echo '</tr>';

The function is getElementById, not getDocumentById

function showHide(id) { 
    if(document.getElementById(id).style.visibility == 'hidden')    
        document.getElementById(id).style.visibility = 'visible'; 
    else 
        document.getElementById(id).style.visibility = 'hidden'; 
}

Also, you can shorten it a bit, and check to make sure an element was found like this:

function showHide(id) {
    var el = document.getElementById(id);
    if( el && el.style.visibility == 'hidden')    
        el.style.visibility = 'visible'; 
    else 
        el.style.visibility = 'hidden'; 
}

Well, if you really want to hide it and not just erase its content you should use:

document.getDocumentById(id).style.display = 'none';

And to show it (TDs), use:

document.getDocumentById(id).style.display = 'table-cell';

http://www.w3schools.com/cssref/pr_class_display.asp