Показать сообщение отдельно
  #5 (permalink)  
Старый 31.08.2013, 10:24
Интересующийся
Отправить личное сообщение для Игося Посмотреть профиль Найти все сообщения от Игося
 
Регистрация: 13.09.2012
Сообщений: 13

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

Последний раз редактировалось Игося, 03.09.2013 в 20:25.
Ответить с цитированием