Scroll TD's

by Vladimir

HTML

<table id='tbl' rules="all">
<tbody>
<tr>
    <td>Name</td>
    <td class="col">1</td>
    <td class="col">2</td>
    <td class="col">3</td>
    <td class="col">4</td>
    <td class="col">5</td>
    <td class="col">6</td>
    <td class="total">Total</td>
</tr>
<tr>
    <td>Ivan</td>
    <td>10</td>
    <td>20</td>
    <td>30</td>
    <td>40</td>
    <td>30</td>
    <td>40</td>
    <td>170</td>
</tr>
<tr>
    <td>Vasiliy</td>
    <td>11</td>
    <td>21</td>
    <td>31</td>
    <td>41</td>
    <td>31</td>
    <td>41</td>
    <td>176</td>
</tr>
</tbody>
</table>
<input type="button" value=" < " id="l" /><input type="button" value=" > " id="r" />

CSS

#tbl {
    width:100%;
    border:1px solid #000;
}
.col {
    width:50px;
}
.total {
    width:100px;
}

JavaScript

var cur = 1;
var sh  = 3;
$('#l').click(function()
                       {
                           sscroll(-1);
                       });
$('#r').click(function()
                       {
                           sscroll(1);
                       });
function sscroll(dir)
{
    cur += dir;
    if(cur<1)
        cur = 1;
    if(cur>3)
        cur = 3;
    $('#tbl tr').each(function()
                       {
                           for(var i=1; i<7;i++)
                           {
                               if(i>=cur&&i<(cur+sh))
                                   $('td', this).eq(i).show();
                               else
                                   $('td', this).eq(i).hide();
                           }
                       });
}

sscroll(0);