Форум

Aidec · #1 (**permalink**) 12.03.2023, 16:33

Есть table
Нужно сделать так что бы строка закрашивалась если в ячейке этой строки есть определенный текст, например "закрасить".
Я находил только варианты при клике или наведении а что бы по тексту в ячейке вообще не встречал.
Может кто подскажет что смотреть, где смотреть?))

рони · #2 (**permalink**) 12.03.2023, 16:41

Aidec,
что мешает поставить класс в цикле проверяя содержимое?

Aidec · #3 (**permalink**) 12.03.2023, 16:53

Често пока не совсем понимаю как это сделать, можно пример или инфу какуето по этому делу?

рони · #4 (**permalink**) 12.03.2023, 16:59

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>

рони · #5 (**permalink**) 12.03.2023, 17:02

Aidec,
если дублировать текст в data атрибут то можно без скрипта только css
td[data-txt*="7"] { ... }

рони · #6 (**permalink**) 12.03.2023, 17:05

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>

рони · #7 (**permalink**) 12.03.2023, 17:12

Aidec,
в будущем будет просто td:contains('ваш_текст'){...}

Aidec · #8 (**permalink**) 12.03.2023, 17:52

А если я текст получаю в td таким образом

‘<td>’ + dateSeven(arr[i].Dataob) + ‘</td>’;

?

рони · #9 (**permalink**) 12.03.2023, 17:59

Aidec,

`<td data-txt="${dateSeven(arr[i].Dataob)}">${dateSeven(arr[i].Dataob)}</td>`

рони · #10 (**permalink**) 12.03.2023, 18:04

Aidec,

`<td class="${dateSeven(arr[i].Dataob).includes('ваш_техт')? 'red' : ''}">${dateSeven(arr[i].Dataob)}</td>`

Форум

Справочник

Discord чат

Курсы javascript