In this javascript tutorial you will learn how to set focus to table object using javascript. Couple of days ago I got the requirement in which I have to focus the table that containing the data, after page loads. You can use same approach to set focus to div in javascript. So let's have a look over how I did this. Again it is one line javascript code.

How to set focus to table using javascript

Focus_table.aspx

<table id="tblFocus" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Get Focus on Table
</td>
</tr>
</table>

<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById('tblFocus').focus();
};
</script>

You have to give the id to the table. When you will run this code snippet then focus will be set to the desired table but this code snippet will not work in firefox.
Now to solve the browser compatability issue you have to put any form field in the table that you want to focus and then using javascript code you have to focus that form field and due to that, focus will be automatically set to that table. So let's have a look over this solution

<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById("<%=txtFocus.ClientID %>").focus();
};
</script>

<table id="tblFocus" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Get Focus on Table
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtFocus" runat="server"></asp:TextBox>
</td>
</tr>
</table>

Now this code will run on almost all browsers but there is a drawback with it. The cursor will directly blink in the textbox and due to this you cannot go to previous page with the Backspace button of your keyboard. Also it is very awkward that cursor is blinking in textbox. But if you hide the textbox using css i.e; style="display:none;" and call the javascript function to focus the textbox then javascript function will throw an error.
Now to get rid of this issue, there is a solution and that solution is to use <a> tag. Let's have a look over it.

<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById('aFocus').focus();
};
</script>

<table id="tblFocus" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Get Focus on Table
</td>
</tr>
<tr>
<td>
<a id="aFocus" href="#"></a>
</td>
</tr>
</table>

And this code snippet will work on all browsers and moreover you can go to previous page by using Backspace key on your keyboard. But I doesn’t recommend this method to set the focus to table/div using javascript. Why should we do extra things????? Let’s have a look over the solution that I strongly recommend, you don’t need to put any form field inside the table/div, and you don’t need to put any extra hyperlink tag near/inside the table/div. Just follow this code snippet.

<table id="tblFocus" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Get Focus on Table
</td>
</tr>
</table>

<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById('tblFocus').scrollIntoView(true);
};
</script>

So this is the pretty line of javascript code that will solve your problem and set focus to the table. You can use these logic to set focus to div element as well. I hope you will like this article, any thing extra will be discussed in the comments :)