Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2013, 17:13
Аспирант
Отправить личное сообщение для xber9 Посмотреть профиль Найти все сообщения от xber9
 
Регистрация: 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>


подскажите как это выбрать и изменить цвет фона
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2013, 00:21
Кандидат Javascript-наук
Отправить личное сообщение для jeysmook Посмотреть профиль Найти все сообщения от jeysmook
 
Регистрация: 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>
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2013, 00:29
Кандидат Javascript-наук
Отправить личное сообщение для jeysmook Посмотреть профиль Найти все сообщения от jeysmook
 
Регистрация: 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>
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2013, 10:22
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

:nth-child
:even/:odd
Ответить с цитированием
  #5 (permalink)  
Старый 04.08.2013, 16:25
Аспирант
Отправить личное сообщение для xber9 Посмотреть профиль Найти все сообщения от xber9
 
Регистрация: 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.
Ответить с цитированием
  #6 (permalink)  
Старый 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;
}
Ответить с цитированием
  #7 (permalink)  
Старый 05.08.2013, 13:41
Аспирант
Отправить личное сообщение для xber9 Посмотреть профиль Найти все сообщения от xber9
 
Регистрация: 09.11.2012
Сообщений: 34

Сообщение от Алек Посмотреть сообщение
Изменить чётные элементы:
$('table tr:even').addClass('new');

Изменить нечётные элементы:
$('table tr:odd').addClass('new');

Css правила для класса new:
.new {
	background-color: selected;
}
но тогда телефон адрес и ссылка тоже будут перекрашиваться через одну а мне же надо чтобы через 3 во втором столбце а первом через одну
Ответить с цитированием
  #8 (permalink)  
Старый 05.08.2013, 13:56
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от 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.
Ответить с цитированием
  #9 (permalink)  
Старый 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.
Ответить с цитированием
  #10 (permalink)  
Старый 07.08.2013, 01:15
Кандидат Javascript-наук
Отправить личное сообщение для jeysmook Посмотреть профиль Найти все сообщения от jeysmook
 
Регистрация: 24.04.2012
Сообщений: 118

xber9,
Второй пример посмотрели?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание элементов под выбранной строкой таблицы Kitana Элементы интерфейса 4 05.09.2011 14:14
Выборка сумм из связанной таблицы ArmagedDance Серверные языки и технологии 2 30.06.2011 11:13
как поменять цвет элементов div с помощью ajax? uspehovna AJAX и COMET 12 20.08.2010 17:21
изменить цвет фона и запомнить его delias Элементы интерфейса 4 19.03.2010 17:34
Почему в Опере не действует заданный цвет границ таблицы? alex-v (X)HTML/CSS 3 20.08.2009 15:29