Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2020, 18:55
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 42

Вопрос из 90x по таблице <table>
Всем привет!

Есть самая обычная ужасная таблица.
Как выделить единой рамкой все строки, относящиеся к конкретному пользователю?
Таблица динамическая. Количество строк у каждого разное. И пользователей разное количество.
Нужно добиться такого результата.
Казалось бы простая задачка, а решить не могу ))


<table>
<tr>
	<td>Маша</td>
	<td>Карандаш</td>
	<td>1</td>
</tr>
<tr>
	<td></td>
	<td>Ручка</td>
	<td>3</td>
</tr>
<tr>
	<td></td>
	<td>Блокнот</td>
	<td>4</td>
</tr>
<tr>
	<td></td>
	<td>Прищепка</td>
	<td>4</td>
</tr>
<tr>
	<td>Саша</td>
	<td>Шышка</td>
	<td>5</td>
</tr>
<tr>
	<td></td>
	<td>Мышка</td>
	<td>1</td>
</tr>
<tr>
	<td></td>
	<td>Батарейка</td>
	<td>6</td>
</tr>
<tr>
	<td>Коля</td>
	<td>Баян</td>
	<td>2</td>
</tr>
<tr>
	<td></td>
	<td>Гармонь</td>
	<td>1</td>
</tr>
<tr>
	<td></td>
	<td>Балалайка</td>
	<td>2</td>
</tr>
<tr>
	<td></td>
	<td>Гитара</td>
	<td>1</td>
</tr>
<tr>
	<td>Валя</td>
	<td>Скотч</td>
	<td>2</td>
</tr>
<tr>
	<td></td>
	<td>Флешка</td>
	<td>1</td>
</tr>
<tr>
	<td>Ира</td>
	<td>Спички</td>
	<td>3</td>
</tr>
<tr>
	<td></td>
	<td>Бычки</td>
	<td>9</td>
</tr>
<tr>
	<td></td>
	<td>Штучки</td>
	<td>5</td>
</tr>
</table>
Ответить с цитированием
  #2 (permalink)  
Старый 09.01.2020, 20:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

tp-20,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table table:nth-child(2n + 1){
      border : #FF0000 3px solid;
  }
  table table:nth-child(2n){
      border : #0000FF 3px solid;
  }
  table table{
      width: 100%;
      margin: 1px;
  }

  </style>

</head>
<body>
<table>
<tr>
	<td>Маша</td>
	<td>Карандаш</td>
	<td>1</td>
</tr>
<tr>
	<td></td>
	<td>Ручка</td>
	<td>3</td>
</tr>
<tr>
	<td></td>
	<td>Блокнот</td>
	<td>4</td>
</tr>
<tr>
	<td></td>
	<td>Прищепка</td>
	<td>4</td>
</tr>
<tr>
	<td>Саша</td>
	<td>Шышка</td>
	<td>5</td>
</tr>
<tr>
	<td></td>
	<td>Мышка</td>
	<td>1</td>
</tr>
<tr>
	<td></td>
	<td>Батарейка</td>
	<td>6</td>
</tr>
<tr>
	<td>Коля</td>
	<td>Баян</td>
	<td>2</td>
</tr>
<tr>
	<td></td>
	<td>Гармонь</td>
	<td>1</td>
</tr>
<tr>
	<td></td>
	<td>Балалайка</td>
	<td>2</td>
</tr>
<tr>
	<td></td>
	<td>Гитара</td>
	<td>1</td>
</tr>
<tr>
	<td>Валя</td>
	<td>Скотч</td>
	<td>2</td>
</tr>
<tr>
	<td></td>
	<td>Флешка</td>
	<td>1</td>
</tr>
<tr>
	<td>Ира</td>
	<td>Спички</td>
	<td>3</td>
</tr>
<tr>
	<td></td>
	<td>Бычки</td>
	<td>9</td>
</tr>
<tr>
	<td></td>
	<td>Штучки</td>
	<td>5</td>
</tr>
</table>
<script>
let table;
document.querySelectorAll("tr").forEach(tr => {
const name = tr.querySelector("td").textContent.trim();
if(name) {
  table = document.createElement("table");
  tr.parentNode.replaceChild(table, tr)
}
if(table) table.append(tr)
})
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 09.01.2020, 22:29
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

tp-20, если таблица генерировалась (или писалась руками) с учётом <tbody> и rowspan бы, то таких проблем не было бы!

<style>
table {
	border-collapse: collapse;
}

td, th {
	border: 1px solid rgba(128, 128, 128, 0.25);
	padding: 0.5em;
}

tbody:nth-child(odd) {
	box-shadow: inset 0 0 0 3px red;
}

tbody:nth-child(even) {
	box-shadow: inset 0 0 0 3px blue;
}
</style>
<table>
	<tbody>
		<tr>
			<td rowspan="4">Маша</td>
			<td>Карандаш</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Ручка</td>
			<td>3</td>
		</tr>
		<tr>
			<td>Блокнот</td>
			<td>4</td>
		</tr>
		<tr>
			<td>Прищепка</td>
			<td>4</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td rowspan="3">Саша</td>
			<td>Шишка</td>
			<td>5</td>
		</tr>
		<tr>
			<td>Мышка</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Батарейка</td>
			<td>6</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td rowspan="4">Коля</td>
			<td>Баян</td>
			<td>2</td>
		</tr>
		<tr>
			<td>Гармонь</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Балалайка</td>
			<td>2</td>
		</tr>
		<tr>
			<td>Гитара</td>
			<td>1</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td rowspan="2">Валя</td>
			<td>Скотч</td>
			<td>2</td>
		</tr>
		<tr>
			<td>Флешка</td>
			<td>1</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td rowspan="3">Ира</td>
			<td>Спички</td>
			<td>3</td>
		</tr>
		<tr>
			<td>Бычки</td>
			<td>9</td>
		</tr>
		<tr>
			<td>Штучки</td>
			<td>5</td>
		</tr>
	</tbody>
</table>


Слово «шишка» начинается на «ши»!

Последний раз редактировалось Malleys, 09.01.2020 в 22:33.
Ответить с цитированием
  #4 (permalink)  
Старый 27.01.2020, 12:34
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 42

Malleys,
спасибо, всё получилось.
теперь возник ещё вопрос
как добиться того, чтобы при наведении курсора (hover) стили css не касались заголовка в таблице th?

В данном случае - нужно чтобы при наведении на заголовок не было красной рамки, а только на строках с именами






<style>
table {border-collapse: collapse;}

td, th {
	border: 1px solid rgba(128, 128, 128, 0.25);
	padding: 0.5em;
}


table > tbody > tr:first-child {background-color: #999;}
table  tbody:nth-child(odd):hover {box-shadow: 0 0 0 2px red inset;}
table  tbody:nth-child(even):hover {box-shadow: 0 0 0 2px blue inset;}
</style>
<table>
	<tbody>
		<th>
			<td>Имя</td>
			<td>Предмет</td>
			<td>Кол-во</td>
		</th>
		<tr>
			<td rowspan="4">Маша</td>
			<td>Карандаш</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Ручка</td>
			<td>3</td>
		</tr>
		<tr>
			<td>Блокнот</td>
			<td>4</td>
		</tr>
		<tr>
			<td>Прищепка</td>
			<td>4</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td rowspan="3">Саша</td>
			<td>Шишка</td>
			<td>5</td>
		</tr>
		<tr>
			<td>Мышка</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Батарейка</td>
			<td>6</td>
		</tr>
	</tbody>
</table>

Последний раз редактировалось tp-20, 27.01.2020 в 13:12.
Ответить с цитированием
  #5 (permalink)  
Старый 27.01.2020, 13:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

tp-20,
формируйте таблицу по "человечески" и будет вам счастье.

<style>
table {border-collapse: collapse;}

td, th {
	border: 1px solid rgba(128, 128, 128, 0.25);
	padding: 0.5em;
}


table > thead > tr:first-child {background-color: #999;}
table  tbody:nth-child(odd):hover {box-shadow: 0 0 0 2px red inset;}
table  tbody:nth-child(even):hover {box-shadow: 0 0 0 2px blue inset;}
</style>
<table>
        <thead>
            <tr>
			<th>Имя</th>
			<th>Предмет</th>
			<th>Кол-во</th>
            </tr>
		</thead>
	<tbody>

		<tr>
			<td rowspan="4">Маша</td>
			<td>Карандаш</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Ручка</td>
			<td>3</td>
		</tr>
		<tr>
			<td>Блокнот</td>
			<td>4</td>
		</tr>
		<tr>
			<td>Прищепка</td>
			<td>4</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td rowspan="3">Саша</td>
			<td>Шишка</td>
			<td>5</td>
		</tr>
		<tr>
			<td>Мышка</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Батарейка</td>
			<td>6</td>
		</tr>
	</tbody>
</table>
Ответить с цитированием
  #6 (permalink)  
Старый 27.01.2020, 13:30
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 42

рони, спасибо! правда, как в 90е вернулся))
Ответить с цитированием
  #7 (permalink)  
Старый 27.01.2020, 14:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от tp-20
как в 90е вернулся
Таблицы и сейчас работают, их никто не отменял...
Ответить с цитированием
  #8 (permalink)  
Старый 05.02.2020, 11:31
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 42

Добрый день! Продолжение темы.
Здесь при адаптивной вёрстке мне нужно уменьшить шрифт некоторых колонок, т.к. текст не помещается.
Но при выборке ячеек нумерация TD сбивается.
Можно ли как-то решить это?
table > tbody > tr > td:nth-child(2) {
    outline: 1px solid red;
    font: 12px Arial;
    color: blue;
}


Ответить с цитированием
  #9 (permalink)  
Старый 05.02.2020, 12:47
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

tp-20, в данном случае можно так...
table > tbody > tr > td:nth-last-of-type(2) {
	outline: 1px solid red;
	font: 12px Arial;
	color: blue;
}
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение цвета ячейки в таблице, при наведении на строку другой таблицы Psychosonic Общие вопросы Javascript 12 24.11.2010 16:44
Авто-селект чекбоксов в таблице alexey_spb jQuery 4 02.09.2010 13:18
Вопрос о циклических ссылках (JavaScript -> Dom -> JavaScipt) BlueIce Events/DOM/Window 10 17.02.2010 21:58
Вопрос про ООП, цепочки прототипов. Shaci Общие вопросы Javascript 5 27.01.2010 14:50
мааленький вопрос по Regexp:) mirniy Общие вопросы Javascript 1 22.01.2009 20:47