Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Нужно переделать CSS для таблицы


Автор: pythonwin 26.8.2006, 10:59
Всем доброго времени суток!

Пожалуйста, помогите!
Нужно переделать 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 почти не знаю 

Автор: Illuminaty 26.8.2006, 12:34
pythonwin, что конкретно нужно? Убрать все атрибуты из таблицы и вынести их в CSS?

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

Да.

Автор: Illuminaty 26.8.2006, 15:19
Так?
Код

<!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>

Автор: pythonwin 26.8.2006, 15:33
Illuminaty, спасибо!
В FF работает нормально, а вот в IE есть проблемы - обе строки серые.

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

Автор: Illuminaty 26.8.2006, 15:40
Код

<!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>

Автор: skyboy 26.8.2006, 15:49
Цитата(pythonwin @  26.8.2006,  14:33 Найти цитируемый пост)
можно ли onclick перенести из таблицы? Например в стили? 

 в стили - нельзя. стили только за внешний вид отвечают, но не за взаимодействие.
а зачем? может, есть другой решение?

Автор: pythonwin 26.8.2006, 15:49
Illuminaty, спасибо!
+1

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

Автор: Illuminaty 26.8.2006, 15:54
Можно 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>

Автор: skyboy 26.8.2006, 16:04
если уж выносить  - то в отдельный файл. ибо кешироваться будут таблица и javascript-обработчики отдельно и при изменении функции реакции на клик не будет перезугржаться в кеше страница с таблицей smile
Да и стили лучше бы вынести в отдельный файл. Наверное smile

Автор: Illuminaty 26.8.2006, 16:12
Цитата(skyboy @  26.8.2006,  17:04 Найти цитируемый пост)
Наверное 

Точно!
Но код постить не очень удобно в таком случае.. а точнее проверятьsmile
А так, сохранил в одном файле и проверил

Автор: pythonwin 26.8.2006, 16:46
Цитата(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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)