| |
|
|
| | Добрый день... Вот сделал у себя на сайте таблицу "Зебру" . Подскажите пожалуйста как сделать чтобы при наведение на строчку (весь tr) она подсвечивалась.
вот js код
function fgetAllDataTables()
{
if (!document.getElementsByTagName) return false;
var eleTables = document.getElementsByTagName("table");
for (var i=0; i < eleTables.length; i++)
{
if (eleTables[i].className == "datatable")
{
fStripes(eleTables[i]);
}
}
}
function fStripes(eleTable)
{
var eleTableRows = eleTable.getElementsByTagName("tr");
for (var i=1; i < eleTableRows.length; i++)
{
eleTableRows[i].className = "trcolor";
i++;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(fgetAllDataTables);
|
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Демо</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js.js" type="text/javascript"></script>
<style type="text/css">
.trcolor { background-color: #F93;}
table {margin:0 0px}
th {background:#006699; color:#fff}
td, th {border:1px solid #000; padding:5px 10px}
</style>
</head>
<body id="home">
<table class="datatable">
<tr>
<th>Продукт</th>
<th>Кол-во</th>
<th>Цена</th>
</tr>
<tr>
<td>Колбаса</td>
<td>5</td>
<td>Ј235</td>
</tr>
<tr>
<td>Мясо</td>
<td>2</td>
<td>Ј56</td>
</tr>
<tr>
<td>Картошка</td>
<td>54</td>
<td>£432</td>
</tr>
<tr>
<td>Йогурт</td>
<td>3</td>
<td>£1</td>
</tr>
<tr>
<td>Огурцы</td>
<td>21</td>
<td>£999</td>
</tr>
<tr>
<td>Рыба</td>
<td>3</td>
<td>Ј72</td>
</tr>
</table>
</body>
</html>
|
С уважением Анатолий.. Надеюсь на помощь | |
| |
|
|
| |
|
|
| |
для: Tegis
(21.07.2009 в 18:05)
| | |
<style>
.light {
background-color: #DBDBDB;
}
.nolight {
background-color: White;
}
</style>
<table class="datatable">
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';">
<th>Продукт</th>
<th>Кол-во</th>
<th>Цена</th>
</tr>
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';">
<td>Колбаса</td>
<td>5</td>
<td>Ј235</td>
</tr>
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';">
<td>Мясо</td>
<td>2</td>
<td>Ј56</td>
</tr>
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';">
<td>Картошка</td>
<td>54</td>
<td>£432</td>
</tr>
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';">
<td>Йогурт</td>
<td>3</td>
<td>£1</td>
</tr>
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';">
<td>Огурцы</td>
<td>21</td>
<td>£999</td>
</tr>
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';">
<td>Рыба</td>
<td>3</td>
<td>Ј72</td>
</tr>
</table>
|
| |
| |
|
|
| |
|
|
| |
для: sim5
(21.07.2009 в 18:28)
| | | Не пашет=(((( Я вывожу в пхп через printf
а там используется """
<?php
do {
$id = $myrow2['id'];
$result3 = mysql_query("SELECT id FROM akkt WHERE executor=$id",$db);
$num = mysql_num_rows($result3);
printf("<tr onmouseover='this.className='light';' onmouseout='this.className='nolight';'><td><a href='executor.php?id=%s'>%s</a></td><td>%s</td></tr>", $myrow2['id'],$myrow2['name'],$num);}
while($myrow2 = mysql_fetch_array($result2)); ?>
|
так не пашет=(( | |
| |
|
|
| |
|
|
| |
для: Tegis
(21.07.2009 в 23:44)
| | | А учиться экранировать кавычки не пробовали? И забудьте о do while.
<?php
while($myrow2 = mysql_fetch_assoc($result2)) {
$id = $myrow2['id'];
$result3 = mysql_query("SELECT id FROM akkt WHERE executor=$id",$db);
$num = mysql_num_rows($result3);
printf('<tr onmouseover="this.className=\'light\';" onmouseout="this.className=\'nolight\';"><td><a
href="executor.php?id=%s">%s</a></td><td>%s</td></tr>', $myrow2['id'],$myrow2['name'],$num);
}
?>
|
Не используйте mysql_fetch_array или, если используете, то хотя бы указывайте тип получаемого массива, в вашем случае:
($myrow2 = mysql_fetch_array($result2, MYSQL_ASSOC))
|
А вообще есть mysql_fetch_assoc.
Вот это, скорее всего, можно получить единым запросом еще в $result2
$result3 = mysql_query("SELECT id FROM akkt WHERE executor=$id",$db);
|
В раздел MySQL к доктору Trianon, он послушает и выпишит рецепт :) | |
| |
|
|
| |
|
|
| |
для: sim5
(22.07.2009 в 07:33)
| | | При наведении он меняет цвет tr
но он его и сохраняет. То есть стоит провести по всей таблице и она вся белая)) Цвет меняется только при рефреше страницы=( | |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 11:45)
| | | Вы просмотрите, что у вас получается в итоге (HTML-результат страницы вашей), а она должна быть такой (по событиям), как выглядит код, который я приводил выше. Если это так, то все должно работать. | |
| |
|
|
| |
|
|
| |
для: sim5
(22.07.2009 в 07:33)
| | | Sim5, не прибедняйтесь!
Ваши попытки выдать себя за фельшера не могут обмануть даже новичка :)
Можно подумать, я что-то другое пропишу нежели Вы. | |
| |
|
|
| |
|
|
| |
для: Trianon
(22.07.2009 в 13:38)
| | | Ну на операционный стол MySQL я не рискну пациента ложить :) | |
| |
|
|
| |
|
|
| |
для: sim5
(22.07.2009 в 13:51)
| | | Вот исходник HTML
<table class="datatable">
<tr><th>Название песни</th><th>песен</th></tr>
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';"><td><a
href="executor.php?id=2">Аблом</a></td><td>0</td></tr><tr onmouseover="this.className='light';" onmouseout="this.className='nolight';"><td><a
href="executor.php?id=3">Авиа</a></td><td>0</td></tr>
</table>
|
вот CSS
.trcolor { background-color: #F93;}
table {margin:0 0px}
th {background:#006699; color:#fff}
td, th {padding:5px 10px;}
.trcolor2 { background-color: #0000FF;}
.light {
background-color: #DBDBDB;
}
.nolight {
background-color: White; }
|
Вот php
<?php
while($myrow2 = mysql_fetch_assoc($result2)) {
$id = $myrow2['id'];
$result3 = mysql_query("SELECT id FROM akkt WHERE executor=$id",$db);
$num = mysql_num_rows($result3);
printf('<tr onmouseover="this.className=\'light\';" onmouseout="this.className=\'nolight\';"><td><a
href="executor.php?id=%s">%s</a></td><td>%s</td></tr>', $myrow2['id'],$myrow2['name'],$num);
}
?>
|
Ну а вот скрины
При загрузке страницы
[img=http://img11.imageshack.us/img11/3783/59808643.th.jpg]
При наведение на 1ю строчку
[img=http://img190.imageshack.us/img190/4696/000wlk.th.jpg]
Первая становится белой и так остаётся
Далее навожу на вторую
[img=http://img32.imageshack.us/img32/450/0000glv.th.jpg]
Ну и в конце концов обе белые
[img=http://img34.imageshack.us/img34/2335/00000z.th.jpg]
Вот=( | |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 18:18)
| | | А вот. Скажите не работает?
<style>
.trcolor { background-color: #F93;} //здесь укажите полное значение
table {margin:0 0px}
th {background:#006699; color:#fff}
td, th {padding:5px 10px;}
.trcolor2 { background-color: #0000FF;}
.light {
background-color: #DBDBDB;
}
.nolight {
background-color: #FFF; }
</style>
<table class="datatable">
<tr><th>Название песни</th><th>песен</th></tr>
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';">
<td>
<a href="executor.php?id=2">Аблом</a></td>
<td>0</td>
</tr>
<tr onmouseover="this.className='light';" onmouseout="this.className='nolight';">
<td><a href="executor.php?id=3">Авиа</a></td>
<td>0</td>
</tr>
</table>
|
У вас выход из строки должне возвращать тот цвет (класс), кторым по умалчанию раскрашены эти строки. А у вас при выходе указан белый цвет, так чего же вы хотите? | |
| |
|
|
| |
|
|
| |
для: sim5
(22.07.2009 в 18:26)
| | | возможно я торможу))) Но у меня же идёт чередование цветов в строчках. То есть получается нужно как то сделать что бы каждой строке вернулся свой первый цвет... | |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 18:37)
| | | Ну вы этот цвет как указываете, через SCC или прописываете в тегах? | |
| |
|
|
| |
|
|
| |
для: sim5
(22.07.2009 в 18:39)
| | | ну вот всё так как на пред ведущих кодах) B CSS | |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 18:45)
| | | В CSS для каждой строки свой класс? Если так, то по выходу со строки возвращайте ее класс, а не .noligth, как я давал в примере. | |
| |
|
|
| |
|
|
| |
для: sim5
(22.07.2009 в 18:48)
| | | ну так у меня же цикл идёт))) вот именно что не получится каждому свой вернуть) | |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 18:50)
| | | можно ли это реализовать на js? Ну или у кого есть подобная таблица хоть на Jquery | |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 18:50)
| | | Значит в цикле вы как-то умудряетесь разные классы строкам из CSS прписать, а вот этот же класс прописать для onmouseout ну прямо таки нельзя?
Из вашего кода, я не вижу, чтобы от строки к строке у вас класс менялся. В том коде, который привели (исходный HTML), что-то и близко не видно прописанных классов. Так как вы "разукрашиваете" свою таблицу? Значит у вас иначе это все, а не так, как вы тут рассказываете.
Можно и на JS, но все равно задействовать придется onmouseout, либо по другому определять объект над которым мыш находится. | |
| |
|
|
| |
|
|
| |
для: sim5
(22.07.2009 в 19:09)
| | | У меня тут js разукрашивает... Там идёт если чётное один цвет нечётное другой. ВОТ
function fgetAllDataTables()
{
if (!document.getElementsByTagName) return false;
var eleTables = document.getElementsByTagName("table");
for (var i=0; i < eleTables.length; i++)
{
if (eleTables[i].className == "datatable")
{
fStripes(eleTables[i]);
}
}
}
function fStripes(eleTable)
{
var eleTableRows = eleTable.getElementsByTagName("tr");
for (var i=1; i < eleTableRows.length; i++)
{
eleTableRows[i].className = "trcolor";
i++;
eleTableRows[i].className = "trcolor2";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(fgetAllDataTables);
|
| |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 19:12)
| | | Тут знает кто js?) Я просто в js 0 полный( | |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 19:12)
| | | А что вы тогда голову морочите. Цвет тегам TR можно указать на стороне сервера, при формироании таблицы, и там же необходиме действия для мыши.
<table class="datatable">
<tr><th>Название песни</th><th>песен</th></tr>
<tr bgcolor="#ffcc99" onmouseover="this.bgColor ='#ff9933'" onmouseout="this.bgColor='#ffcc99'">
<td>
<a href="executor.php?id=2">Аблом</a></td>
<td>0</td>
</tr>
<tr bgcolor="#cccc99" onmouseover="this.bgColor ='#ff9933'" onmouseout="this.bgColor ='#cccc99'">
<td><a href="executor.php?id=3">Авиа</a></td>
<td>0</td>
</tr>
<tr bgcolor="#ffcc99" onmouseover="this.bgColor ='#ff9933'" onmouseout="this.bgColor ='#ffcc99'">
<td><a href="executor.php?id=3">Авиа</a></td>
<td>0</td>
</tr>
<tr bgcolor="#cccc99" onmouseover="this.bgColor ='#ff9933'" onmouseout="this.bgColor ='#cccc99'">
<td><a href="executor.php?id=3">Авиа</a></td>
<td>0</td>
</tr>
</table>
|
| |
| |
|
|
| |
|
|
| |
для: sim5
(22.07.2009 в 19:35)
| | | ну это же уже исходник=))) Сам код выглядит вот как
<table class="datatable">
<tr><th>Название песни</th><th>песен</th></tr>
<?php
while($myrow2 = mysql_fetch_assoc($result2)) {
$id = $myrow2['id'];
$result3 = mysql_query("SELECT id FROM akkt WHERE executor=$id",$db);
$num = mysql_num_rows($result3);
printf('<tr onmouseover="this.className=\'light\';" onmouseout="this.className=\'nolight\';"><td><a
href="executor.php?id=%s">%s</a></td><td>%s</td></tr>', $myrow2['id'],$myrow2['name'],$num);
}
?>
</table>
|
| |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 19:45)
| | | аууу) | |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 19:45)
| | | Ну это же не догма, кто программист своего кода вы или за вас кошка делает? )
<?
//до цикла объявляете переменную, по четности которой,
//будет узнавать какой класс (или цвет) указывать строке
$color = 0;
while($myrow2 = mysql_fetch_assoc($result2)) {
$id = $myrow2['id'];
$result3 = mysql_query("SELECT id FROM akkt WHERE executor=$id",$db);
$num = mysql_num_rows($result3);
$class_over = !($color & 1) ? "over_1" : "over_2";
$class_out = !($color & 1) ? "out_1" : "out_2";
printf('<tr onmouseover="this.className=\''.$class_over.'\'" onmouseout="this.className=\''.$class_out.'\'"><td><a
href="executor.php?id=%s">%s</a></td><td>%s</td></tr>', $myrow2['id'],$myrow2['name'],$num);
$color++;
}
?>
|
Пропишите в CSS две пары классов этим строкам: over_1, over_2 и out_1, out_2. Имена конечно можете выбрать свои, какие вам заблагорассудится. | |
| |
|
|
| |
|
|
| |
для: sim5
(22.07.2009 в 20:31)
| | | Огромное спасибо sim5. Респект тебе)) | |
| |
|
|
| |
|
|
| |
для: Tegis
(22.07.2009 в 20:37)
| | | Анатолий, вы случаем не Михаил? Больно на Мишу похожи | |
| |
|
|
| |
|
|
| |
для: Жмурик
(22.07.2009 в 21:23)
| | | не понял вашего плоского юмора | |
| |
|
|
| |
автор: kama (08.11.2009 в 00:04) |
|
| |
для: Tegis
(22.07.2009 в 21:34)
| | | Или я чет не понял. Но все же проще простого, нах эти онмаусовер/аут все же тупо CSS можно сделать.
где стиль для раскраски идет для класса trcolor
следующей строчкой пишем:
table.класс-таблицы tr:hover, table.класс-таблицы tr.trcolor:hover {background:#ccc;}
#ccc - цвет при наведении | |
| |
|
|
| |
|
|
| |
для: kama
(08.11.2009 в 00:04)
| | | Для IE hover только для ссылок hover, а для остального пофиг. Собственно если уж "онмаусовер/аут" то вешать надо обработчик один, и на такблицу, дабы не плодить лишних буковок в таблице, а в обработчике обработать. | |
| |
|
|
