Как закрасить строку в 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>`
|
Круто!
Скажи пожалуйста, а как мне сделать приоритет по классу, например у меня в строчке есть слово “уволить" на которое завязан класс "red" и есть слово "Оставить" у него класс "black", Ну нужно что бы класс "black" имел приоритет над "red" Тесть если в строке есть два слова "оставить" и "уволить" тогда должен включиться класс "black", а не "red" |
Aidec,
let txt = dateSeven(arr[i].Dataob);
let cls = '';
if(txt.includes('Оставить')) cls = 'black';
else if(txt.includes('уволить')) cls = 'red';
let td = `<td class="${cls}">${txt}</td>`;
|
Идея понятная но я гдето туплю и что-то не правильно делаю.
Вот полный скрипт
var tbody = document.querySelector('tbody');
for(var i = 0; i < arr.length; i++) {
var tr = document.createElement('tr');
tr.innerHTML =
‘<td class="${cls}">${dateSeven(arr[i].Dataob)}</td>’ +
‘<td class="${cls}">${dateOtstr(arr[i].Dataob)}</td>’;
tbody.appendChild(tr);
};
|
Все разобрался))
|
| Часовой пояс GMT +3, время: 19:59. |