Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   выборка элементов таблицы и цвет фона (https://javascript.ru/forum/jquery/40394-vyborka-ehlementov-tablicy-i-cvet-fona.html)

xber9 03.08.2013 17:13
выборка элементов таблицы и цвет фона
 
народ подскажите
есть вот такая таблица
<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>


подскажите как это выбрать и изменить цвет фона

jeysmook 04.08.2013 00:21 
<!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>

jeysmook 04.08.2013 00:29
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>

bes 04.08.2013 10:22
:nth-child
:even/:odd

xber9 04.08.2013 16:25
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>


должны быть выделены цветом
но через одну такую КОНСТРУКЦИЮ а не через одну строку в каждом столбце

то есть надо сделать как во втором варианте но не меняя таблицы

Алек 04.08.2013 21:47
Изменить чётные элементы:
$('table tr:even').addClass('new');

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

Css правила для класса new:
.new {
	background-color: selected;
}

xber9 05.08.2013 13:41
Цитата:
Сообщение от Алек (Сообщение 265842)
Изменить чётные элементы:
$('table tr:even').addClass('new');

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

Css правила для класса new:
.new {
	background-color: selected;
}
но тогда телефон адрес и ссылка тоже будут перекрашиваться через одну а мне же надо чтобы через 3 во втором столбце а первом через одну

ksa 05.08.2013 13:56
Цитата:
Сообщение от 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>

Алек 05.08.2013 16:33
Цитата:
Сообщение от xber9 (Сообщение 265898)
но тогда телефон адрес и ссылка тоже будут перекрашиваться через одну а мне же надо чтобы через 3 во втором столбце а первом через одну
Как вариант добавить нужным элементам id="notClass", а затем добавить фильтр отрицания:
$('table tr:even:not(#notClass)').addClass('new');

или:
$('table tr:odd:not(#notClass)').addClass('new');

Хотя конечно как уже сказал ksa лучше сделать разметку и решить всё с помощью css.

jeysmook 07.08.2013 01:15
xber9,
Второй пример посмотрели?

xber9 07.08.2013 20:30
cСпакссибо уже сделал как Ksa написал


Часовой пояс GMT +3, время: 02:48.