Как прочитать вложенный innerHtml и добавить фон к родителю? - PullRequest
Новая
       31

Как прочитать вложенный innerHtml и добавить фон к родителю?

1 голос
/ 27 марта 2019

У меня проблемы с работой через веб-страницу - мне нужно найти некоторые известные innerHtml в таблице и повлиять на родительский тег тега, который содержит innerHtml.Боюсь, у меня почти нет JavaScript-игры ...

HTML-код выглядит следующим образом: 

<table> <tbody>
    <tr class="header">
        <td>
            <table> <tbody>
                <tr class="header">
                    <td> <u> January </u> </td>
                    <td>foo</td>
                </tr>
            </tbody> </table>
        </td>
    </tr>
    <tr class="header">
        <td>
            <table> <tbody>
                <tr class="header">
                    <td> <u> February </u> </td>
                    <td>bar</td>
                </tr>
            </tbody> </table>
        </td>
    </tr>
</tbody> </table>

Я пытаюсь НАЙТИ "Январь" и добавить цвет фона для родителя,вот мой код: 

var thetr = document.getElementsByTagName('tr');
for (j = 0; j < thetr.length; j++) {
    var theTd1 = thetr[j].getElementsByTagName('td');
    for (k = 0; k < theTd1.length; k++) {
        var theTd2 = theTd1[l].getElementsByTagName('td');
        for (m = 0; m < theTd2.length; k++) {
            if (theTd2[j].innerHtml == "January") {
                thetr[j].style.backgroundColor = "rgb(255, 195, 195)";
            }
        }
    }
}

Ничего не получается ... если я добавляю предупреждение, чтобы показать innerHtml, что он читает каждый уровень, я просто получаю 'undefined'.Насколько неправильный мой метод?Заранее спасибо.

1 Ответ

2 голосов
/ 27 марта 2019

Несколько вещей:

  1. Всегда проверяйте консоль браузера на наличие ошибок. Там вы бы видели такие вещи, как:

    l не определено

  2. Используйте querySelectorAll() (или используйте jQuery), чтобы найти узлы. Вы сэкономите кучу горя.
  3. За исключением случаев создания совершенно новых узлов, использование innerHtml в скрипте Tampermonkey почти всегда является ошибкой и очень ломким, даже если оно работает некоторое время. Ваш скрипт или страница сломаются с малейшим изменением.
  4. Если страница управляется AJAX, статические методы, подобные этому, не будут работать, независимо от того.

Для статической страницы , эта демонстрация показывает Vanilla.js для подсветки этой строки: 

var headerCells = document.querySelectorAll ("tr.header > td > u");
headerCells.forEach (uNode => {
    if (/January/i.test (uNode.textContent) ) {
        uNode.parentNode.parentNode.style.backgroundColor = "lime";
    }
} );
<table> <tbody>
    <tr class="header">
        <td>
            <table> <tbody>
                <tr class="header">
                    <td> <u>January</u> </td>
                    <td>foo</td>
                </tr>
            </tbody> </table>
        </td>
    </tr>
    <tr class="header">
        <td>
            <table> <tbody>
                <tr class="header">
                    <td> <u>February</u> </td>
                    <td>bar</td>
                </tr>
            </tbody> </table>
        </td>
    </tr>
</tbody> </table>


или в jQuery, код так же прост, как: 

$("tr.header > td > u:contains(January)").closest ("tr").css ("background", "lime");


Для статической страницы или для AJAX-управляемой страницы приведен полный скрипт Tampermonkey, который работает: 

// ==UserScript==
// @name     _Highlight January
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
/* global $, waitForKeyElements */

waitForKeyElements ("tr.header > td > u:contains(January)", justLimen);

function justLimen (jNode) {
    jNode.closest ("tr").css ("background", "lime");
}
...