Форум

khameleonium · #1 (**permalink**) 18.05.2021, 07:56

Есть такая табличка

<table class="table_s">
<tbody>
<tr><td><input type="checkbox"></td> <td>950</td></tr>
<tr><td><input type="checkbox"></td><td>100 Йо-хо-хо!</td></tr>
<tr><td><input type="checkbox"></td><td>299 и бутылка рома!</td></tr>

... и т.д.

Я хочу запустить простой JS в консоли Хрома, который бы искал в таблице текст с заданными через запятую кусками текста (например: "100", "299", Йо-хо", "992") и при совпадении, отмечал чекбоксы соответствующие найденному пункту. Вместо запятой можно использовать любой другой разделитель или же логическое "или" - не суть.
Касательно логики алгоритма, вроде всё просто: Ищем в правом <td> некий набор символов. Если что-то из заданного через запятую совпадает, то делаем "checked" у чекбокса в левом <td>. Но я не знаю, как делать выборку неидентифицированных элементов и т.д.

Никаких идентификаторов строки и столбцы таблицы не имеют. Их много, разного количества строк, но структура одинакова: Слева чекбокс, справа текст с описанием пункта
Нужен чистый JS без всяких jQuery.
Помогёте?

рони · #2 (**permalink**) 18.05.2021, 10:33

khameleonium,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
    <table class="table_s">
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>950</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>100 Йо-хо-хо!</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>299 и бутылка рома!</td>
            </tr>
        </tbody>
    </table>
    <script>
        const words = "100,299,Йо-хо,992",
            table = document.querySelector(".table_s")
        function checkedWords(words, table) {
            words = words.split(",");
            const inputs = table.querySelectorAll("[type='checkbox']");
            inputs.forEach(el => {
                let next = el.parentNode.nextElementSibling;
                if (next) {
                    let text = next.textContent;
                    el.checked = words.some(word => text.includes(word))
                }
            })
        }
        checkedWords(words, table)
    </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript