03.08.2013, 17:13
|
|
Аспирант
|
|
Регистрация: 09.11.2012
Сообщений: 34
|
|
|
выборка элементов таблицы и цвет фона
народ подскажите
есть вот такая таблица
<table width="100%" border="0">
<tr style="background-color:#8BC8FE">
<th scope="col">Название </th>
<th scope="col">Информация</th>
</tr>
<tr>
<td rowspan="3">
Автовокзал Щёлковский</td>
<td>тел:+7(499)748-80-29, +7(499)748-89-64 </td>
</tr>
<tr>
<td>Адрес: Москва, ул. Уральская, 2,</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9633000">Расписане на Яндексе</a></td>
</tr>
<tr>
<td rowspan="3">
Автостанция Кантемировская</td>
<td>Тел: +7 (926) 019-06-06, +7 (926) 019-08-08 </td>
</tr>
<tr>
<td>Адрес: Москва, Москва, Пролетарский просп.,20, стр.2</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9727138">Расписане на Яндексе</a></td>
</tr>
<tr>
<td rowspan="3">
Автостанция Красногвардейская</td>
<td>Тел: +7 (495) 395-54-87</td>
</tr>
<tr>
<td>Адрес: Москва, Метро "Красногвардейская", "Зябликово", Ореховый бульвар, 24Г</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9744832">Расписане на Яндексе</a></td>
</tr>
...........................
</table>
нужно выбрать и изменить фон у таких конструкций но через одну
<tr>
<td rowspan="3">
Автостанция Красногвардейская</td>
<td>Тел: +7 (495) 395-54-87</td>
</tr>
<tr>
<td>Адрес: Москва, Метро "Красногвардейская", "Зябликово", Ореховый бульвар, 24Г</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9744832">Расписане на Яндексе</a></td>
</tr>
подскажите как это выбрать и изменить цвет фона
|
|
04.08.2013, 00:21
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.04.2012
Сообщений: 118
|
|
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table tr').each(function(i, it){
if(i % 2 == 0) {
$(this).addClass('even');
}
})
});
</script>
<style type="text/css">
table tr {background:#eee;}
table .even {background:#c0c0c0;}
</style>
</head>
<body>
<table width="100%" border="0">
<tr style="background-color:#8BC8FE">
<th scope="col">Название </th>
<th scope="col">Информация</th>
</tr>
<tr>
<td rowspan="3">
Автовокзал Щёлковский</td>
<td>тел:+7(499)748-80-29, +7(499)748-89-64 </td>
</tr>
<tr>
<td>Адрес: Москва, ул. Уральская, 2,</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9633000">Расписане на Яндексе</a></td>
</tr>
<tr>
<td rowspan="3">
Автостанция Кантемировская</td>
<td>Тел: +7 (926) 019-06-06, +7 (926) 019-08-08 </td>
</tr>
<tr>
<td>Адрес: Москва, Москва, Пролетарский просп.,20, стр.2</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9727138">Расписане на Яндексе</a></td>
</tr>
<tr>
<td rowspan="3">
Автостанция Красногвардейская</td>
<td>Тел: +7 (495) 395-54-87</td>
</tr>
<tr>
<td>Адрес: Москва, Метро "Красногвардейская", "Зябликово", Ореховый бульвар, 24Г</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9744832">Расписане на Яндексе</a></td>
</tr>
</table>
</body>
</html>
|
|
04.08.2013, 00:29
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.04.2012
Сообщений: 118
|
|
xber9,
Или немного изменить структуру тадлицы
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table tr').each(function(i, it){
if(i % 2 == 0) {
$(this).addClass('even');
}
});
});
</script>
<style type="text/css">
table tr {background:#eee;}
table .even {background:#c0c0c0;}
</style>
</head>
<body>
<table width="100%" border="0">
<tr style="background-color:#8BC8FE">
<th scope="col">Название </th>
<th scope="col">Информация</th>
</tr>
<tr>
<td>Автовокзал Щёлковский</td>
<td>
<div>тел:+7(499)748-80-29, +7(499)748-89-64</div>
<div>Адрес: Москва, ул. Уральская, 2,</div>
<div><a href="http://rasp.yandex.ru/station/9633000">Расписане на Яндексе</a></div>
</td>
</tr>
<tr>
<td>Автовокзал Щёлковский</td>
<td>
<div>тел:+7(499)748-80-29, +7(499)748-89-64</div>
<div>Адрес: Москва, ул. Уральская, 2,</div>
<div><a href="http://rasp.yandex.ru/station/9633000">Расписане на Яндексе</a></div>
</td>
</tr>
<tr>
<td>Автовокзал Щёлковский</td>
<td>
<div>тел:+7(499)748-80-29, +7(499)748-89-64</div>
<div>Адрес: Москва, ул. Уральская, 2,</div>
<div><a href="http://rasp.yandex.ru/station/9633000">Расписане на Яндексе</a></div>
</td>
</tr>
<tr>
<td>Автовокзал Щёлковский</td>
<td>
<div>тел:+7(499)748-80-29, +7(499)748-89-64</div>
<div>Адрес: Москва, ул. Уральская, 2,</div>
<div><a href="http://rasp.yandex.ru/station/9633000">Расписане на Яндексе</a></div>
</td>
</tr>
<tr>
<td>Автовокзал Щёлковский</td>
<td>
<div>тел:+7(499)748-80-29, +7(499)748-89-64</div>
<div>Адрес: Москва, ул. Уральская, 2,</div>
<div><a href="http://rasp.yandex.ru/station/9633000">Расписане на Яндексе</a></div>
</td>
</tr>
</table>
</body>
</html>
|
|
04.08.2013, 10:22
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
:nth-child
:even/:odd
|
|
04.08.2013, 16:25
|
|
Аспирант
|
|
Регистрация: 09.11.2012
Сообщений: 34
|
|
To: jeysmook
не там где телефон адрес и ссылка надо выделять каждую из трех строк то есть все элементы конструкции
<td rowspan="3">
Автовокзал Щёлковский</td>
<td>тел:+7(499)748-80-29, +7(499)748-89-64 </td>
</tr>
<tr>
<td>Адрес: Москва, ул. Уральская, 2,</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9633000">Расписане на Яндексе</a></td>
</tr>
<tr>
должны быть выделены цветом
но через одну такую КОНСТРУКЦИЮ а не через одну строку в каждом столбце
то есть надо сделать как во втором варианте но не меняя таблицы
Последний раз редактировалось xber9, 04.08.2013 в 16:29.
|
|
04.08.2013, 21:47
|
 |
Аспирант
|
|
Регистрация: 14.04.2013
Сообщений: 85
|
|
Изменить чётные элементы:
$('table tr:even').addClass('new');
Изменить нечётные элементы:
$('table tr:odd').addClass('new');
Css правила для класса new:
.new {
background-color: selected;
}
|
|
05.08.2013, 13:41
|
|
Аспирант
|
|
Регистрация: 09.11.2012
Сообщений: 34
|
|
Сообщение от Алек
|
Изменить чётные элементы:
$('table tr:even').addClass('new');
Изменить нечётные элементы:
$('table tr:odd').addClass('new');
Css правила для класса new:
.new {
background-color: selected;
}
|
но тогда телефон адрес и ссылка тоже будут перекрашиваться через одну а мне же надо чтобы через 3 во втором столбце а первом через одну |
|
05.08.2013, 13:56
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
|
Сообщение от xber9
|
|
изменить фон у таких конструкций но через одну
|
С разметкой нужно поработать и все решится простым ЦСС...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
tbody:nth-child(2n) {
background-color: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table width="100%" border="0">
<thead>
<tr style="background-color:#8BC8FE">
<th scope="col">Название </th>
<th scope="col">Информация</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Автовокзал Щёлковский</td>
<td>тел:+7(499)748-80-29, +7(499)748-89-64 </td>
</tr>
<tr>
<td>Адрес: Москва, ул. Уральская, 2,</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9633000">Расписане на Яндексе</a></td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">Автостанция Кантемировская</td>
<td>Тел: +7 (926) 019-06-06, +7 (926) 019-08-08 </td>
</tr>
<tr>
<td>Адрес: Москва, Москва, Пролетарский просп.,20, стр.2</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9727138">Расписане на Яндексе</a></td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">Автостанция Красногвардейская</td>
<td>Тел: +7 (495) 395-54-87</td>
</tr>
<tr>
<td>Адрес: Москва, Метро "Красногвардейская", "Зябликово", Ореховый бульвар, 24Г</td>
</tr>
<tr>
<td><a href="http://rasp.yandex.ru/station/9744832">Расписане на Яндексе</a></td>
</tr>
</tbody>
</table>
</body>
</html>
Последний раз редактировалось ksa, 05.08.2013 в 13:59.
|
|
05.08.2013, 16:33
|
|
Аспирант
|
|
Регистрация: 14.04.2013
Сообщений: 85
|
|
|
Сообщение от xber9
|
|
но тогда телефон адрес и ссылка тоже будут перекрашиваться через одну а мне же надо чтобы через 3 во втором столбце а первом через одну
|
Как вариант добавить нужным элементам id="notClass", а затем добавить фильтр отрицания:
$('table tr:even:not(#notClass)').addClass('new');
или:
$('table tr:odd:not(#notClass)').addClass('new');
Хотя конечно как уже сказал ksa лучше сделать разметку и решить всё с помощью css.
Последний раз редактировалось Алек, 05.08.2013 в 16:37.
|
|
07.08.2013, 01:15
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.04.2012
Сообщений: 118
|
|
|
xber9,
Второй пример посмотрели?
|
|
|
|
