Javascript.RU

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

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

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

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

Последний раз редактировалось Игося, 27.08.2013 в 22:25.
Ответить с цитированием
  #2 (permalink)  
Старый 28.08.2013, 10:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,830

Сообщение от Игося
дайте только идею
Как вариант...
- Данные вообще хранить не в той таблице
- Содержимое таблицы менять динамически
Ответить с цитированием
  #3 (permalink)  
Старый 28.08.2013, 11:38
Аватар для jsru_
Кандидат Javascript-наук
Отправить личное сообщение для jsru_ Посмотреть профиль Найти все сообщения от jsru_
 
Регистрация: 09.04.2013
Сообщений: 149

мне кажется или это обычная карусель? автор, ты рассматривал варианты карусели?
Ответить с цитированием
  #4 (permalink)  
Старый 28.08.2013, 11:44
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<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, 09: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 в 19:25.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Unsafe JavaScript attempt to access frame with URL, Domains, protocols and ports must eqwill Javascript под браузер 1 13.11.2012 01:00
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 18:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 19:34
Изменение ссылки средствами JavaScript stepback Общие вопросы Javascript 1 19.08.2010 13:08
Есть ли на JavaScript аналог PHP функции include?) FirstFrost Общие вопросы Javascript 3 13.07.2010 09:13