<table>
<tr data-city="Москва" data-brand="Brand1" data-prem="1"><td>-</td></tr>
<tr data-city="Москва" data-brand="Brand2" data-prem="0"><td>-</td></tr>
<tr data-city="Екатеринбург" data-brand="Brand1" data-prem="0"><td>-</td></tr>
<tr data-city="Москва" data-brand="Brand1" data-prem="0"><td>-</td></tr>
<tr data-city="Казань" data-brand="Brand1" data-prem="0"><td>-</td></tr>
<tr data-city="Москва" data-brand="Brand5" data-prem="0"><td>-</td></tr>
<tr data-city="Москва" data-brand="Brand1" data-prem="0"><td>-</td></tr>
<tr data-city="Москва" data-brand="Brand2" data-prem="1"><td>-</td></tr>
</table>
tr>td {
width: 25vw;
}
tr.true {
background-color: green;
}
tr.false {
background-color: red;
}
const rows = [ document.querySelectorAll('tr') ];
const makeKey = (city, brand) => `${city}:${brand}`;
const prems = rows.reduce((acc, c) => {
const { prem, city, brand } = c.dataset;
if (prem === '1') acc.push(makeKey(city, brand));
return acc;
}, []);
rows.forEach(tr => {
const { prem, city, brand } = tr.dataset;
if (prem === '1') {
tr.classList.add('true');
} else if (prem === '0') {
if (prems.includes(makeKey(city, brand))) {
tr.classList.add('false');
}
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.