Блог

Главная - Вопросы по программированию - Javascript получает доступ только к внутренней таблице

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

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

У меня есть система, которая генерирует список вложенных таблиц. Я не могу ни изменить ее, ни добавить какие-либо идентификаторы / теги / классы к каким-либо родительским таблицам. Я также не могу добавить ни 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.

Ответ №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>

Ответ №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>