Спасибо за советы.
Мне больше всего импонирует вариант, предложенный пользователем
Deff - добавление и удаление класса.
Мое решение выглядит так (может кому пригодиться):
<head>
<style>
table
{
border-spacing: 0px;
border-collapse: collapse;
margin: 1px;
}
#phisical td
{
padding: 1px;
border: solid 1px #000000;
display:none;
}
#phisical td.show
{
display:table-cell;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
document.getElementsById = function(id)
{
var el = document.getElementById(id);
if(!el)
{
return el;
}
else
{
var els = document.getElementsByTagName(el.tagName),
j = 0,
res = [];
while(els[j])
{
if(els[j].id==id)
res.push(els[j]);
j++;
}
return res;
}
};
function phisical_previous(x)
{
var classtd = $(".show");
var classtdid = classtd[0].id;
var classtdid_old = parseInt(classtdid) - parseInt(x);
if (classtdid_old < 1)
{
classtdid_old = 1;
}
var classtdid_new = parseInt(classtdid_old) + 4;
for (var i=1; i<=10; i++)
{
if (i>=classtdid_old &&
i<=classtdid_new)
{
document.getElementsById(i).forEach(function(i){i.className = "show"});
}
else
{
document.getElementsById(i).forEach(function(i){i.className = ""});
}
}
}
function phisical_next(x)
{
var classtd = $(".show");
var classtdid = classtd[0].id;
var classtdid_new = parseInt(classtdid) + 4 + parseInt(x);
if (classtdid_new > 10)
{
classtdid_new = 10;
}
var classtdid_old = parseInt(classtdid_new) - 4;
for (var i=1; i<=10; i++)
{
if (i>=classtdid_old &&
i<=classtdid_new)
{
document.getElementsById(i).forEach(function(i){i.className = "show"});
}
else
{
document.getElementsById(i).forEach(function(i){i.className = ""});
}
}
}
</script>
</head>
<body>
<a href="#" onclick="phisical_previous(5);"><<</a>
<a href="#" onclick="phisical_previous(1);"><</a>
<a href="#" onclick="phisical_next(1);">></a>
<a href="#" onclick="phisical_next(5);">>></a>
<table id="phisical">
<tr><td id="1" class="show">1</td>
<td id="2" class="show">2</td>
<td id="3" class="show">3</td>
<td id="4" class="show">4</td>
<td id="5" class="show">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td></tr>
<tr><td id="1" class="show">1</td>
<td id="2" class="show">2</td>
<td id="3" class="show">3</td>
<td id="4" class="show">4</td>
<td id="5" class="show">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td></tr>
</table>
</body>
Я в javascript очень слаб, поэтому решение вполне реально сделано не самым рациональным способом, но все работает.