Форум

xaocbozzz · #1 (**permalink**) 24.10.2012, 14:07

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

Есть база 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 Строку я действительно собираюсь удалить (из базы тоже), но застрял вот тут и не могу дальше пройти.

danik.js · #2 (**permalink**) 24.10.2012, 14:33

Проще всего это сделать на 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>

a_l · #3 (**permalink**) 24.10.2012, 20:28

На js:
http://jsfiddle.net/ledak/pFp6H/

xaocbozzz · #4 (**permalink**) 25.10.2012, 04:21

Сообщение от a_l

На js:
http://jsfiddle.net/ledak/pFp6H/

Ваш вариант меняет содержимое каждой ячейки. А надо только одной при наведении на строку.

xaocbozzz · #5 (**permalink**) 25.10.2012, 07:20

danik.js, ваш код работает некорректно.

xaocbozzz · #6 (**permalink**) 25.10.2012, 07:26

Упрощу код:

<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
и т.п.

Your · #7 (**permalink**) 25.10.2012, 07:40

<!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 напишу.
Или поправлю, что не так.
Пишите)

cyber · #8 (**permalink**) 25.10.2012, 09:51

Сообщение от 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>

xaocbozzz · #9 (**permalink**) 25.10.2012, 10:05

Your, все не то. Люди! Прочитайте правильно задачу: нужно менять содержимое только ОДНОЙ ячейки в каждой строке

a_l · #10 (**permalink**) 25.10.2012, 12:01

Цитата:

Ваш вариант меняет содержимое каждой ячейки. А надо только одной при наведении на строку.

Поменяйте одну букву в моём примере:
var tds = document.getElementsByTagName('tr');

Форум

Справочник

Discord чат

Курсы javascript