Question

The task is to take action if the focus is not found on any td in a table. The table layout is stored in a jquery variable, whose layout looks like this

<table class="cal_tbl" cellSpacing="1" cellPadding="3">  <tbody>
<tr>
  <td class="cal_head">&lt;&lt;</td>
  <td class="cal_head">&lt;</td>
  <td class="cal_head" colSpan="3">November 2012</td>
  <td class="cal_head">&gt;</td>
  <td class="cal_head">&gt;&gt;</td>
</tr>
<tr>
  <td class="cal_subhead">Sun</td>
  <td class="cal_subhead">Mon</td>
  <td class="cal_subhead">Tue</td>
  <td class="cal_subhead">Wed</td>
  <td class="cal_subhead">Thu</td>
  <td class="cal_subhead">Fri</td>
  <td class="cal_subhead">Sat</td>
</tr>
<tr>
  <td colSpan="4"></td>
  <td class="cal_cell">1</td>
  <td class="cal_cell">2</td>
  <td class="cal_cell">3</td>
</tr>
<tr>
  <td class="cal_cell">4</td>
  <td class="cal_cell">5</td>
  <td class="cal_cell">6</td>
  <td class="cal_cell">7</td>
  <td class="cal_cell">8</td>
  <td class="cal_cell">9</td>
  <td class="cal_cell">10</td>
</tr>
<tr>
  <td class="cal_cell">25</td>
  <td class="cal_cell">26</td>
  <td class="cal_cell">27</td>
  <td class="cal_cell">28</td>
  <td class="cal_cell">29</td>
  <td class="cal_cell">30</td>
</tr>  </tbody></table>

I have to check whether the focus is on any of the td
The below is my code what I tried

if ($(CurrentCalendarButton).children[i].is(":focus") == true)
     alert("Keep it on")

Answer 1

The problem is that all not elements on the DOM actually accept focus, and it’s up to the browser to decide which ones do. See Which HTML elements can receive focus?

Maybe have a hover event on your td:

var hasFocus = false;
$('td').hover(
    function () { hasFocus = true;  alert('has focus  !');},
    function () { hasFocus = false; alert('lost focus !');}
);