Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.01.2018, 23:57
Bab Bab вне форума
Интересующийся
Отправить личное сообщение для Bab Посмотреть профиль Найти все сообщения от Bab
 
Регистрация: 07.04.2017
Сообщений: 10

Выделить строку в таблице через input и label
Доброго времени суток!
Если кто может - помогите пожалуйста.
При клике на строку должен нажиматься соответствующий input, а строка - выделяться другим цветом. Нужно сделать именно через css, без js.

Таков был план:
(Пробовал увеличить z-index для label и понизить для содержимого - срабатывает, если внутри button, но не tr td)
<style>
	label {
		color:green;
		background-color:white;
	}
	input:checked + label {
		color:white;
		background-color:green;
	}
</style>
<table>
	<input type='radio' id = '1'><label for='1'><tr><td>текст</td><td>таблицы</td></tr></label>
</table>


Близко к истине, но не могу выделить цветом все label, только первый. И не разобрался, как подставить аналог /\d+/ в id.
<style>
	label {
		color:green;
		background-color:white;
	}
	input[id='2']:checked ~ label[for='2'] {
		color:white;
		background-color:green;
	}
        input[id='3']:checked label[for='3'] {
		color:white;
		background-color:green;
	}
</style>
<table>
	<tr><td><input type='radio' id = '2' name='name'><label for='2'>текст</label></td><td><label for='2'>таблицы</label></td></tr>
	<tr><td><input type='radio' id = '3' name='name'><label for='3'>текст</label></td><td><label for='3'>таблицы</label></td></tr>
</table>

По отдельности эти селекторы работают, вместе - нет.
<style>
	label[for='2'] {
		color:white;
		background-color:green;
	}	
        input[id='3']:checked {
		display: none;
	}
</style>
<table>
	<tr><td><input type='radio' id = '2' name='name'><label for='2'>текст</label></td><td><label for='2'>таблицы</label></td></tr>
	<tr><td><input type='radio' id = '3' name='name'><label for='3'>текст</label></td><td><label for='3'>таблицы</label></td></tr>
</table>
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2018, 00:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Bab,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  input:checked + table {
		color:white;
		background-color:green;
	}
  label  table {
		 display: inline-block;
	}
  </style>

</head>

<body>
<table  >

	<tbody>
		<tr>
			<td><label ><input type='radio'  name="test"><table><tr><td>текст</td><td>таблицы</td></tr></table></label></td>
		</tr>
       	<tr>
			<td><label ><input type='radio'  name="test"><table><tr><td>текст</td><td>таблицы</td></tr></table></label></td>
		</tr>
       	<tr>
			<td><label ><input type='radio'  name="test"><table><tr><td>текст</td><td>таблицы</td></tr></table></label></td>
		</tr>
	</tbody>
</table>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2018, 11:44
Bab Bab вне форума
Интересующийся
Отправить личное сообщение для Bab Посмотреть профиль Найти все сообщения от Bab
 
Регистрация: 07.04.2017
Сообщений: 10

Но так теряется весь смысл от таблицы
Может все-таки можно связать эти два селектора?
По отдельности они же срабатывают:
<style>
        input[id='1']:checked {
		display: none;
	}
	label[for='2'] {
		color:white;
		background-color:green;
	}	
        input[id='3']:checked label[for='3'] {
		color:white;
		background-color:green;
	}
</style>
<table>
        <tr><td><input type='radio' id = '1' name='name'><label for='1'>текст</label></td><td><label for='1'>таблицы</label></td></tr>
	<tr><td><input type='radio' id = '2' name='name'><label for='2'>текст</label></td><td><label for='2'>таблицы</label></td></tr>
	<tr><td><input type='radio' id = '3' name='name'><label for='3'>текст</label></td><td><label for='3'>таблицы</label></td></tr>
</table>

Эта таблица из одной из шаблонных страниц сайта, данные из базы, количество столбцов при выводе разное, некоторые надо объединять, если характеристика одинаковая. Выравнивать через блоки очень муторно + с таблицей уже все готово.
В общем-то главный вопрос в том, почему
<label><button></label>, <label><div> - работает, а
<label><td></label> - нет.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение значений input в форме перед ее отправкой через ajax rustleofstars jQuery 4 26.06.2012 17:40
Клонирую input через JQ и теряется его value Sergey999 Javascript под браузер 9 02.04.2012 00:02
отправка текста через адресную строку Изучаю_JS Общие вопросы Javascript 29 11.01.2012 18:47
Получить содержимое HTML файла через input Battleprof Events/DOM/Window 5 13.06.2011 14:51
Изменение цвета ячейки в таблице, при наведении на строку другой таблицы Psychosonic Общие вопросы Javascript 12 24.11.2010 16:44