Как закрасить строку в table по условию
Есть table
Нужно сделать так что бы строка закрашивалась если в ячейке этой строки есть определенный текст, например "закрасить". Я находил только варианты при клике или наведении а что бы по тексту в ячейке вообще не встречал. Может кто подскажет что смотреть, где смотреть?)) |
Aidec,
что мешает поставить класс в цикле проверяя содержимое? |
Често пока не совсем понимаю как это сделать, можно пример или инфу какуето по этому делу?
|
css includes text
Aidec,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: 0.8rem;
}
td,
th {
border: 2px solid rgb(200, 200, 200);
}
td.red {
background-color: #FF0000;
}
</style>
</head>
<body>
<table>
<caption>Alien football stars</caption>
<tr>
<th scope="col">Player</th>
<th scope="col">Gloobles</th>
<th scope="col">Za'taak</th>
</tr>
<tr>
<th scope="row">TR-7</th>
<td>7</td>
<td>4,569</td>
</tr>
<tr>
<th scope="row">Khiresh Odo</th>
<td>7</td>
<td>7,223</td>
</tr>
<tr>
<th scope="row">Mia Oolong</th>
<td>9</td>
<td>6,219</td>
</tr>
</table>
<script>
let patern = '7';
document.querySelectorAll('td').forEach(td => {
let txt = td.textContent;
td.classList.toggle('red', txt.includes(patern))
})
</script>
</body>
</html>
|
Aidec,
если дублировать текст в data атрибут то можно без скрипта только css td[data-txt*="7"] { ... } |
Aidec,
отмечены ячейки в которых есть цифра 9
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: 0.8rem;
}
td,
th {
border: 2px solid rgb(200, 200, 200);
}
td[data-txt*="9"] {
background-color: #FF0000;
}
</style>
</head>
<body>
<table>
<caption>Alien football stars</caption>
<tr>
<th scope="col">Player</th>
<th scope="col">Gloobles</th>
<th scope="col">Za'taak</th>
</tr>
<tr>
<th scope="row">TR-7</th>
<td data-txt="7">7</td>
<td data-txt="4,569">4,569</td>
</tr>
<tr>
<th scope="row">Khiresh Odo</th>
<td data-txt="7">7</td>
<td data-txt="7,223">7,223</td>
</tr>
<tr>
<th scope="row">Mia Oolong</th>
<td data-txt="9">9</td>
<td data-txt="6,219">6,219</td>
</tr>
</table>
</body>
</html>
|
Aidec,
в будущем будет просто td:contains('ваш_текст'){...} |
А если я текст получаю в td таким образом
‘<td>’ + dateSeven(arr[i].Dataob) + ‘</td>’; ? |
Aidec,
`<td data-txt="${dateSeven(arr[i].Dataob)}">${dateSeven(arr[i].Dataob)}</td>`
|
Aidec,
`<td class="${dateSeven(arr[i].Dataob).includes('ваш_техт')? 'red' : ''}">${dateSeven(arr[i].Dataob)}</td>`
|
| Часовой пояс GMT +3, время: 10:45. |