Аналог frame средствами javascript.
Здравствуйте, прошу помощи.
У меня есть таблица, которая не влазит в ширину листа, скажем такая: <table> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> </table> Я хотел бы на экран выводить только часть ячеек, а сверху или снизу таблицы сделать кнопки, которые будут открывать другие ячейки, примерно так: <a>Назад</a> | <a>Вперед</a> <table> <tr> <td>2</td><td>3</td><td>4</td> </tr> </table> При нажатии на кнопку "Назад" на экране будет отображаться: <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> </table> При нажатии на кнопку "Вперед" на экране будет отображаться: <table> <tr> <td>3</td><td>4</td><td>5</td> </tr> </table> Получается что-то вроде фрейма, только на javascript (без перезагрузок и полос прокрутки). Подскажите, как такое сделать. Прошу код не писать, дайте только идею или ссылку на учебный материал, чтобы я сам смог разобраться. |
Цитата:
- Данные вообще хранить не в той таблице - Содержимое таблицы менять динамически |
мне кажется или это обычная карусель? автор, ты рассматривал варианты карусели?
|
<style>
#Tam td {
border:red solid 1px;
display:none;
}
#Tam td.show{
display:table-cell;
}
</style>
<table id=Tam>
<tr>
<td>1</td><td class="show">2</td><td class="show">3</td><td class="show">4</td><td>5</td>
</tr>
</table>
Cкрыть все ячейки, открывать нужные добавкой класса |
Спасибо за советы.
Мне больше всего импонирует вариант, предложенный пользователем 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 очень слаб, поэтому решение вполне реально сделано не самым рациональным способом, но все работает. |
| Часовой пояс GMT +3, время: 13:26. |