Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Нужно переделать CSS для таблицы 
V
    Опции темы
pythonwin
  Дата 26.8.2006, 10:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36
Всем доброго времени суток!

Пожалуйста, помогите!
Нужно переделать CSS:

Код

.grid { background-color:#000000;font-size:12px;font-family:verdana,sans-serif;border:1;width:100%;}
.grid td, .grid th {padding:3px;border:1;}
.grid .action_cell { text-align:right; }
.grid THEAD { text-align:left;background-color:#f0f0f0;color:#333;}
.grid .heading img { float:right;margin-left:2px;margin-right:3px; } 
.grid .heading a { text-decoration:none;color:#333; }
.grid td a { text-decoration:none;color:#333}
.grid .odd{background-color:#edf3fe}
.grid .even{background-color:#fff}
.grid .pointer {cursor:pointer}
.grid .column_chooser_link {position:relative;background-color:#e3e3e3;}
.grid .column_chooser_link ul {position:absolute;display:none;top:0px;right:-20px;}
.grid .column_chooser_list a {width:200px;display:block;padding:3px;background-color:#e3e3e3;}
.grid .column_chooser_list a:hover {background-color:#cdcdcd;}
.grid .column_chooser_list { padding:0;margin:0;list-style:none;background-color:#e3e3e3; }


чтобы моя таблица выгледела как:

Код

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>Style Title</title>
</head>

<body>

<table width="100%" id="table1" cellspacing="1" border="0" cellpadding="3" bgcolor="black" bordercolor="#ffffff">
    <tr bgcolor="#D9D9D9" onclick="alert('Title')">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#ffffff" onclick="alert('Body')">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>


очень важно, что у строк можно было использовать onclick

CSS почти не знаю 


--------------------
портал по Python
раздел на винграде по Python
язык Python
PM WWW GTalk Jabber   Вверх
Illuminaty
Дата 26.8.2006, 12:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
pythonwin, что конкретно нужно? Убрать все атрибуты из таблицы и вынести их в CSS?
PM MAIL ICQ   Вверх
pythonwin
Дата 26.8.2006, 14:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36
Цитата(Illuminaty @  26.8.2006,  19:34 Найти цитируемый пост)
pythonwin, что конкретно нужно? Убрать все атрибуты из таблицы и вынести их в CSS? 

Да.


--------------------
портал по Python
раздел на винграде по Python
язык Python
PM WWW GTalk Jabber   Вверх
Illuminaty
Дата 26.8.2006, 15:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Так?
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Style Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style media="screen" type="text/css">
body, html {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    overflow: auto;
}
#mainTable {
    width: 100%;
    border-collapse: collapse;
}
#mainTable td {
    border: 1px solid #000000;
    padding: 2px;
}
#mainTable tr{
    background-color: #D9D9D9;
}
#mainTable tr+tr{
    background-color: #FFFFFF;
}
</style>
</head>

<body>
<table id="mainTable" summary="Style Table">
        <tr onClick="alert('Title')">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
        </tr>
        <tr onClick="alert('Body')">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
        </tr>
</table>
</body>
</html>
PM MAIL ICQ   Вверх
pythonwin
Дата 26.8.2006, 15:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36
Illuminaty, спасибо!
В FF работает нормально, а вот в IE есть проблемы - обе строки серые.

Ище вопрос - можно ли onclick перенести из таблицы? Например в стили?


--------------------
портал по Python
раздел на винграде по Python
язык Python
PM WWW GTalk Jabber   Вверх
Illuminaty
Дата 26.8.2006, 15:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Style Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style media="screen" type="text/css">
body, html {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    overflow: auto;
}
#mainTable {
    width: 100%;
    border-collapse: collapse;
}
#mainTable td {
    border: 1px solid #000000;
    padding: 2px;
}
#mainTable .tr1{
    background-color: #D9D9D9;
}
#mainTable .tr2{
    background-color: #FFFFFF;
}
</style>
</head>

<body>
<table id="mainTable" summary="Style Table">
        <tr class="tr1" onClick="alert('Title')">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
        </tr>
        <tr class="tr2" onClick="alert('Body')">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
        </tr>
</table>
</body>
</html>
PM MAIL ICQ   Вверх
skyboy
Дата 26.8.2006, 15:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260
Цитата(pythonwin @  26.8.2006,  14:33 Найти цитируемый пост)
можно ли onclick перенести из таблицы? Например в стили? 

 в стили - нельзя. стили только за внешний вид отвечают, но не за взаимодействие.
а зачем? может, есть другой решение?
PM MAIL   Вверх
pythonwin
Дата 26.8.2006, 15:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36
Illuminaty, спасибо!
+1

А как вынести onclick из таблицы?


--------------------
портал по Python
раздел на винграде по Python
язык Python
PM WWW GTalk Jabber   Вверх
Illuminaty
Дата 26.8.2006, 15:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Можно smile
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Style Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style media="screen" type="text/css">
body, html {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    overflow: auto;
}
#mainTable {
    width: 100%;
    border-collapse: collapse;
}
#mainTable td {
    border: 1px solid #000000;
    padding: 2px;
}
#mainTable .tr1{
    background-color: #D9D9D9;
}
#mainTable .tr2{
    background-color: #FFFFFF;
}
</style>
</head>

<body>
<table id="mainTable" summary="Style Table">
        <tr class="tr1">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
        </tr>
        <tr class="tr2">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
        </tr>
</table>
<script language="javascript" type="text/javascript">
    var mainTable = document.getElementById("mainTable");
    var array_tr = mainTable.getElementsByTagName("tr");
    array_tr[0].onclick = function() { alert("Title"); };
    array_tr[1].onclick = function() { alert("Body"); };
</script>
</body>
</html>
PM MAIL ICQ   Вверх
skyboy
Дата 26.8.2006, 16:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260
если уж выносить  - то в отдельный файл. ибо кешироваться будут таблица и javascript-обработчики отдельно и при изменении функции реакции на клик не будет перезугржаться в кеше страница с таблицей smile
Да и стили лучше бы вынести в отдельный файл. Наверное smile
PM MAIL   Вверх
Illuminaty
Дата 26.8.2006, 16:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Цитата(skyboy @  26.8.2006,  17:04 Найти цитируемый пост)
Наверное 

Точно!
Но код постить не очень удобно в таком случае.. а точнее проверятьsmile
А так, сохранил в одном файле и проверил
PM MAIL ICQ   Вверх
pythonwin
Дата 26.8.2006, 16:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: нет
Всего: 36
Цитата(Illuminaty @  26.8.2006,  22:54 Найти цитируемый пост)
<script language="javascript" type="text/javascript">
    var mainTable = document.getElementById("mainTable");
    var array_tr = mainTable.getElementsByTagName("tr");
    array_tr[0].onclick = function() { alert("Title"); };
    array_tr[1].onclick = function() { alert("Body"); };
</script>

спасибо! Что-то я запарился smile


--------------------
портал по Python
раздел на винграде по Python
язык Python
PM WWW GTalk Jabber   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0525 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.