Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.05.2020, 21:35
Аспирант
Отправить личное сообщение для Юсуф Посмотреть профиль Найти все сообщения от Юсуф
 
Регистрация: 09.03.2012
Сообщений: 81

Закрасить td или див в процентном соотношении
Добрый вечер! помогите реализовать одну задумку. Допустим есть таблица и внем много td строк. каждая строка это этаж здания. мне нужно закрасить в определенный цвет эту ячейку в зависимости от полученных значений из mysql через ajax. Допустим в каждой строке 1000 кв. м. в базе указано 500 кв.м выполнено работ. получается нужно закрасить 50% этой ячейки. как это сделать? прошу вашей помощи
Ответить с цитированием
  #2 (permalink)  
Старый 15.05.2020, 21:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,643

Юсуф,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    tbody td {
        border: 1px solid #000000;
        background-image: linear-gradient(to right, #228B22 , #228B22 var(--p,0%),#FFFFFF var(--p,0%));

    }
    tbody td:before{
        content: attr(data-p);
    }

    </style>

</head>
<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>
<script>
for (const td of document.querySelectorAll('tbody td')) {
   const data = `${Math.trunc(101 * Math.random())}%`;
   td.style.setProperty('--p', data);
   td.dataset.p = data;
}
</script>

</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кастомный селект, чекбокс, радио vostok Ваши сайты и скрипты 0 11.08.2013 23:33