1 Replies - 501 Views - Last Post: 09 September 2012 - 03:20 PM

#1 g37752  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 195
  • Joined: 24-July 12

how do i make an x-button with which user can close a <td> ele

Posted 09 September 2012 - 02:12 PM

I couldn't even find the name for the "x-button" which usually is a window-closing button (or is it a button?)

I need such a button for user to delete/hide a <td> element.

How do I do that?

thanks
Is This A Good Question/Topic? 0
  • +

Replies To: how do i make an x-button with which user can close a <td> ele

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: how do i make an x-button with which user can close a <td> ele

Posted 09 September 2012 - 03:20 PM

All you really have to do for something like this is add an ID to each of the elements.
<a href="javascript: void(0);" id="closeButton">X</a>

<td id="theTdElem">...</td>



Then you can add Javascript code in the window.onload that will cause the <A> element to hide or remove the <TD> element, by using the element.onclick event.
// Assign code to be executed when the window has finished loading.
window.onload = function() {
    // Get a reference to the button element
    var button = document.getElementById("closeButton");

    // Assign code to be executed when the button element is clicked.
    button.onclick = function() {
        // Get a reference to the TD element
        var tdelem = document.getElementById("theTdElem");
        
        // To hide it completely:
        tdelem.style.display = "none";
        
        // To remove it:
        tdelem.parentNode.removeChild(tdelem);
    }
}


Just keep in mind that the window.onload and button.onclick events can only be assigned one callback if you do it like this. If multiple scripts are using the window.onload event, then each will overwrite those that came before it. You'd need to use more robust event handing for those types of situations. (Which involves some backwards compatibility crap if you want IE8 and lower to work, so you'll have to look into that.)
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1