How to hide a table when it blur/or click document that outside the table

Question

best in jQuery. thanks.

Answer 1

You can use event bubbling to your advantage here, like this:

$("#tableID").click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  $("#tableID").hide();
});

With event.stopPropagation() we stop the bubble from reaching document when it comes from within the table. When it comes from elsewhere it (by default) gets to document, hiding the table. In "by default", I mean you haven't done areturn false or .stopPropagation() on those click events.

Answer 2

If you're asking how to hide the table when the user clicks elsewhere in the document (your wording is a little off), then may I suggest the clickoutside special event from Ben Alman?

Usage:

$('table').bind("clickoutside", function(event){
    $(this).hide();
});

Or, if that seems a bit OTT, then try this (no plugins required):

var myTable = $('table');
$(document).click(function(e) {
    if (e.target !== myTable[0] && !$.contains(myTable[0], e.target)) {
        myTable.hide();
    }
});

Answer 3

Table have not blur, but elements inner table have:

$('#yourtableid:visible a').each(function(){
    $(this).bind('blur', function(){
        $('#yourtableid:visible').hide();
    });
});

$(document).bind('click', function(){
   $('#yourtableid:visible').hide();
});

This is jast idea, not solution