Закрасить td или див в процентном соотношении
Добрый вечер! помогите реализовать одну задумку. Допустим есть таблица и внем много td строк. каждая строка это этаж здания. мне нужно закрасить в определенный цвет эту ячейку в зависимости от полученных значений из mysql через ajax. Допустим в каждой строке 1000 кв. м. в базе указано 500 кв.м выполнено работ. получается нужно закрасить 50% этой ячейки. как это сделать? прошу вашей помощи
|
Юсуф,
<!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> |
Часовой пояс GMT +3, время: 21:48. |