Как поменять содержимое 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 Строку я действительно собираюсь удалить (из базы тоже), но застрял вот тут и не могу дальше пройти. |
Проще всего это сделать на 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>
|
|
Цитата:
|
danik.js, ваш код работает некорректно.
|
Упрощу код:
<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 и т.п. |
<!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><a href="#">one</a> td1 <a href="#">two</a></td> |
Your, все не то. Люди! Прочитайте правильно задачу: нужно менять содержимое только ОДНОЙ ячейки в каждой строке
|
Цитата:
var tds = document.getElementsByTagName('tr'); |
| Часовой пояс GMT +3, время: 04:27. |