Javascript.RU

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

Как поменять содержимое TD при наведении на строку?
Два дня бьюсь. Подскажите, пожалуйста - прямо чую, что это просто. Но туплю или знаний не хватает.
Необходимо поменять что-либо в ячейке (содержимое, класс, атрибуты) при наведении на строку, в которой ячейка и находится.
Вот более конкретно:

Есть база MySQL. Из нее вытаскиваю данные в таблицу циклом while

Получаю примерно такую таблицу:

Тип | Заголовок | Текст | Дата
Новинка | Привет | Как дела | 12.12.12
Новость | Проблема | Поменять TD при наведении на TR | 24.10.12
...

Вот сам краткий цикл:
echo "<table><thead>
<th>Тип</th><th>Заголовок</th><th>Текст</th><th>Дата</th>
<thead><tbody>";
$r = 0; // <- Cтавим счетчик (нужен ли он?)
while ($row = mysql_fetch_object($getdata)) {
$r++; // <- Счетчик пошел
echo "<tr id='alltr".$r."'> // <- Присвоил тут уникальный id (?)
<td id='td_type".$r."'>".$row->type."</td> // <- Присвоил тут уникальный id (?)
<td>".$row->title."</td>
<td>".$row->full."</td>
<td>".$row->date."</td>
</tr>";
}
echo "</tbody></table>";


Хочу чтобы при наведении на строку - один из td поменялся. Например с $row->type на слово "Удалить". А при "отведении" - $row->type вставал на место.

Испробывал много способов и все время втыкаюсь в проблему:

Например, если в строку tr прописать onmouseover='showKick(); То затем логично создается функция:

function showKick () {
	document.getElementById('td_type').innerHTML = 'Удалить';
}


Только всем известно, что ID он на то и ID, что он уникальный. Как мне сюда завязать показание счетчика?
Или может быть есть более интересное решение? Можно на jq

ps Строку я действительно собираюсь удалить (из базы тоже), но застрял вот тут и не могу дальше пройти.

Последний раз редактировалось xaocbozzz, 24.10.2012 в 14:12.
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2012, 14:33
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Проще всего это сделать на css:
table tr:hover td:first-child .record-delete{
display: block;
cursor: pointer;
}
table tr:hover td:first-child .record-type{
display: none;
}

а в td пишите
<td>
    <span class="record-type">тут тип</span>
    <span class="record-delete">удалить</span>
</td>
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2012, 20:28
Аватар для a_l
a_l a_l вне форума
Кандидат Javascript-наук
Отправить личное сообщение для a_l Посмотреть профиль Найти все сообщения от a_l
 
Регистрация: 15.09.2011
Сообщений: 143

На js:
http://jsfiddle.net/ledak/pFp6H/
Ответить с цитированием
  #4 (permalink)  
Старый 25.10.2012, 04:21
Аватар для xaocbozzz
Интересующийся
Отправить личное сообщение для xaocbozzz Посмотреть профиль Найти все сообщения от xaocbozzz
 
Регистрация: 28.04.2012
Сообщений: 13

Сообщение от a_l Посмотреть сообщение
На js:
http://jsfiddle.net/ledak/pFp6H/
Ваш вариант меняет содержимое каждой ячейки. А надо только одной при наведении на строку.
Ответить с цитированием
  #5 (permalink)  
Старый 25.10.2012, 07:20
Аватар для xaocbozzz
Интересующийся
Отправить личное сообщение для xaocbozzz Посмотреть профиль Найти все сообщения от xaocbozzz
 
Регистрация: 28.04.2012
Сообщений: 13

danik.js, ваш код работает некорректно.
Ответить с цитированием
  #6 (permalink)  
Старый 25.10.2012, 07:26
Аватар для xaocbozzz
Интересующийся
Отправить личное сообщение для xaocbozzz Посмотреть профиль Найти все сообщения от xaocbozzz
 
Регистрация: 28.04.2012
Сообщений: 13

Упрощу код:
<table>
<tr><td>type_01</td><td>title_01</td><td>text_01</td><td>date_01</td></tr>
<tr><td>type_02</td><td>title_02</td><td>text_02</td><td>date_02</td></tr>
<tr><td>type_03</td><td>title_03</td><td>text_03</td><td>date_03</td></tr>
</table>


При наведении на строку tr:
type_01 должен стать del_01
type_02 должен стать del_02
type_03 должен стать del_03

При "отведении" курсора от строки tr
del_01 становиться обратно type_01
и т.п.
Ответить с цитированием
  #7 (permalink)  
Старый 25.10.2012, 07:40
Кандидат Javascript-наук
Отправить личное сообщение для Your Посмотреть профиль Найти все сообщения от Your
 
Регистрация: 03.10.2012
Сообщений: 147

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example</title>
</head>
<body>
	<table id="table">
		<tr>
			<td>td1</td>
		</tr>
		<tr>
			<td>td2</td>
		</tr>
		<tr>
			<td>td3</td>
		</tr>
	</table>
	<script type="text/javascript">
		function table() {
			var table=document.getElementById('table').getElementsByTagName('tr'),
				innerhtml='';
			for(var i in table) {
				table[i].onmouseover=function(event) {
					//event=fixEvent(event);
					innerhtml=event.target.innerHTML;
					event.target.innerHTML='Удалить';
				};
				table[i].onmouseout=function(event) {
					//event=fixEvent(event);
					event.target.innerHTML=innerhtml;
				};
			}
		}
		table();
	</script>
</body>
</html>


Если надо на jq напишу.
Или поправлю, что не так.
Пишите)
Ответить с цитированием
  #8 (permalink)  
Старый 25.10.2012, 09:51
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от Your Посмотреть сообщение
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example</title>
</head>
<body>
	<table id="table">
		<tr>
			<td>td1</td>
		</tr>
		<tr>
			<td>td2</td>
		</tr>
		<tr>
			<td>td3</td>
		</tr>
	</table>
	<script type="text/javascript">
		function table() {
			var table=document.getElementById('table').getElementsByTagName('tr'),
				innerhtml='';
			for(var i in table) {
				table[i].onmouseover=function(event) {
					//event=fixEvent(event);
					innerhtml=event.target.innerHTML;
					event.target.innerHTML='Удалить';
				};
				table[i].onmouseout=function(event) {
					//event=fixEvent(event);
					event.target.innerHTML=innerhtml;
				};
			}
		}
		table();
	</script>
</body>
</html>


Если надо на jq напишу.
Или поправлю, что не так.
Пишите)
не будет работать если внутрь td добавить какой то обьект.
<td><a href="#">one</a> td1 <a href="#">two</a></td>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #9 (permalink)  
Старый 25.10.2012, 10:05
Аватар для xaocbozzz
Интересующийся
Отправить личное сообщение для xaocbozzz Посмотреть профиль Найти все сообщения от xaocbozzz
 
Регистрация: 28.04.2012
Сообщений: 13

Your, все не то. Люди! Прочитайте правильно задачу: нужно менять содержимое только ОДНОЙ ячейки в каждой строке
Ответить с цитированием
  #10 (permalink)  
Старый 25.10.2012, 12:01
Аватар для a_l
a_l a_l вне форума
Кандидат Javascript-наук
Отправить личное сообщение для a_l Посмотреть профиль Найти все сообщения от a_l
 
Регистрация: 15.09.2011
Сообщений: 143

Цитата:
Ваш вариант меняет содержимое каждой ячейки. А надо только одной при наведении на строку.
Поменяйте одну букву в моём примере:
var tds = document.getElementsByTagName('tr');
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
Изменение цвета ячейки в таблице, при наведении на строку другой таблицы Psychosonic Общие вопросы Javascript 12 24.11.2010 16:44
menu с выпадающими подменю при наведении и раздвижное при клике bugor Элементы интерфейса 3 04.10.2010 14:32
Как при наведении на ссылку отображать объекты под классом visibility: hidden; pavdin Общие вопросы Javascript 8 02.07.2010 15:18
Всплывающее окошко, как подсказка при наведении на кнопку. rastafaray Общие вопросы Javascript 4 24.05.2008 00:55