Форум

Игося · #1 (**permalink**) 27.08.2013, 23:22

Здравствуйте, прошу помощи.

У меня есть таблица, которая не влазит в ширину листа, скажем такая:

<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 (без перезагрузок и полос прокрутки).

Подскажите, как такое сделать.

Прошу код не писать, дайте только идею или ссылку на учебный материал, чтобы я сам смог разобраться.

ksa · #2 (**permalink**) 28.08.2013, 11:42

Сообщение от Игося

дайте только идею

Как вариант...
- Данные вообще хранить не в той таблице
- Содержимое таблицы менять динамически

jsru_ · #3 (**permalink**) 28.08.2013, 12:38

мне кажется или это обычная карусель? автор, ты рассматривал варианты карусели?

Deff · #4 (**permalink**) 28.08.2013, 12:44

<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крыть все ячейки, открывать нужные добавкой класса

Игося · #5 (**permalink**) 31.08.2013, 10:24

Спасибо за советы.
Мне больше всего импонирует вариант, предложенный пользователем 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 очень слаб, поэтому решение вполне реально сделано не самым рациональным способом, но все работает.

Форум

Справочник

Discord чат

Курсы javascript