scroll table with focus

<style>
#t1 tr { background-color:#CCCCFF }
#t1 td {width:150px}
.green {background-color: green; }
.blue {background-color: #CCCCFF; }
</style> 
<script>
window.onload=function() {
  var tb = document.getElementById('t1');
  for (var i=0;i<tb.rows.length;i++) {
    for (var j=0;j<tb.rows[i].cells.length;j++) {
     tb.rows[i].cells[j].onfocus=function() {this.className='green'}
     tb.rows[i].cells[j].onblur=function() {this.className='blue'}
    }
  }
  tb.rows[0].cells[0].focus();
}
</script>
<div style="width:800px;overflow:scroll;">
		<table id="t1" cellpadding="5" cellspacing="1" border="0" width="2000">
            <tr>
                <td tabindex="1" class="green">
                    fsdfsd</td>
                <td tabindex="2">
                    fsdfds</td>
                <td tabindex="3">
                    fsdfsd</td>
                <td tabindex="4">
                    hghfgh</td>
            </tr>
            <tr>
                <td tabindex="5">
                    fsdfsd</td>
                <td tabindex="6">
                    fsdfds</td>
                <td tabindex="7">
                    fsdfsd</td>
                <td tabindex="8">
                    hghfgh</td>
            </tr>
        </table>
</div>