Javascript получить доступ только к внутренней таблице

Question

У меня есть система, которая генерирует список вложенных таблиц.Я не могу ни изменить его, ни добавить какие-либо идентификаторы / теги / классы в родительские таблицы.Я также не могу добавить ни jQuery, ни любую другую библиотеку JS.

Я хочу добавить подсветку при наведении курсора на строку внутренней таблицы (обычно у меня есть 2-3 вложенных таблицы).

Можеткто-нибудь помочь мне настроить этот образец для моего случая?Проблема с кодом, который захватывает <td/> теги родительских таблиц.

var tds = document.getElementsByTagName( "td" );
    for( var i = 0; i < tds.length; i++ ) {
      tds[i].addEventListener("mouseover", function(){
          var children = this.parentNode.getElementsByTagName("td");
          for( var j = 0; j < children.length; j++ )
            children[j].style.backgroundColor = "green";
          });
      tds[i].addEventListener("mouseout", function(){
         var children = this.parentNode.getElementsByTagName("td");
            for( var j = 0; j < children.length; j++ )
                    children[j].style.backgroundColor = "initial";
            });
        }
    

   

<table>
    <tr>
    <td>
        <table>
            <tr>
                <td>cell1,1</td>
                <td>cell1,2</td>
                <td>cell1,3</td>
            </tr>
            <tr>
                <td>cell2,1</td>
                <td>cell2,2</td>
                <td>cell2,3</td>
            </tr>
        </table>
    </td>
    <td> test </td>
    </tr>
</table>

К сожалению, я еще недостаточно хорош в JS.

Answer 1

Я бы отказался от JavaScript и использовал простой селектор CSS

table table tr:hover {
  background: green;
}

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>cell1,1</td>
          <td>cell1,2</td>
          <td>cell1,3</td>
        </tr>
        <tr>
          <td>cell2,1</td>
          <td>cell2,2</td>
          <td>cell2,3</td>
        </tr>
      </table>
    </td>
    <td> test </td>
  </tr>
</table>

Answer 2

Ответ, упомянутый выше, работает, если число вложенных таблиц всегда равно 2. В соответствии с требованиями, вы упомянули, что у вас обычно есть 2-3 вложенных таблицы, поэтому он не будет работать, если есть 3 или более вложенных таблиц.Вам придется изменить CSS-селекторы.

С помощью решения, приведенного ниже, становится более динамичным всегда получать строку самой внутренней таблицы, как первоначально запрошено.

var tables = document.getElementsByTagName("table");
tables[tables.length - 1].classList.add("highlighter");

.highlighter tr:hover {
  background: green;
}

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>cell1,1</td>
          <td>cell1,2</td>
          <td>cell1,3</td>
        </tr>
        <tr>
          <td>cell2,1</td>
          <td>cell2,2</td>
          <td>cell2,3</td>
        </tr>
      </table>
    </td>
    <td> test </td>
  </tr>
</table>