У меня есть требование выделить строку и столбец ячейки в таблице на mouseover. Сгенерированная таблица является динамической, я получаю значения из базы данных и отображаются в html-таблица. Структура таблицы точно такая, как показано ниже, и я не могу изменить существующую структуру. Пожалуйста, предложите с моим существующим html-кодом, как я могу выделить выделенную строку и столбец в таблице, используя jquery/css. Найдите скрипку http://jsfiddle.net/0w9yo8x6/78/.выделите выделенную строку и столбец на mouseover в таблице html.

Ниже приведен HTML-код:

<div> 
<table border="1px"> 
<tr> 
<td> 
    <table style="width:100%"> 
     <tr title="Table Header"> 
     <td> 
     Title 
     </td> 
     </tr> 
    </table> 
</td> 
</tr> 
<tr> 
<td> 
    <table border="1px"> 
     <tr> 
     <td></td> 
     <td bgcolor="grey">Header1</td> 
     <td bgcolor="grey">Header2</td> 
     <td bgcolor="grey">Header3</td> 
     <td bgcolor="grey">Header4</td> 
     <td bgcolor="grey">Header5</td> 
     </tr> 

    <tr> 
     <td bgcolor="grey">Row1</td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell1 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell1 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell1 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell1 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell1 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell1 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell1 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell1 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell1 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell1 
      </td> 
      </tr> 
      </table> 
     </td> 
     </tr> 

     <tr> 
     <td bgcolor="grey">Row2</td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell2 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell2 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell2 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell2 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell2 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell2 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell2 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell2 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell2 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell2 
      </td> 
      </tr> 
      </table> 
     </td> 
     </tr> 


     <tr> 
     <td bgcolor="grey">Row3</td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell3 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell3 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell3 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell3 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell3 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell3 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell3 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell3 
      </td> 
      </tr> 
      </table> 
     </td> 
     <td> 
      <table> 
      <tr> 
      <td> 
       Cell3 
      </td> 
      </tr> 
      <tr> 
      <td class='innerCell'> 
      Inner cell3 
      </td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
     </table> 
     </td> 
     </tr> 
     </table> 
     </div>

2015-02-04 user222

'тр: парить {цвет фона: ...; } ', возможно? – Biffen

Я хочу выделить выделенную строку и столбец цветом с помощью мыши. @Biffen – user222

Можете ли вы дать нам визуальное представление о том, чего вы пытаетесь достичь, возможно, образ. – cusackBOOM

освещает конкретные строки и столбцы. для столбцов я использовал nth-child() как часть селектора. надеюсь это поможет.

примечание: я добавил класс .myCell в tds 2-го уровня вложенной таблицы для большей простоты в имени селектора для jquery.

$(document).ready(function() { 
 
    $('.myCell').on('mouseover', function() { 
 
     $(this).closest('tr').addClass('highlight'); 
 
     $(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight'); 
 
    }); 
 
    $('.myCell').on('mouseout', function() { 
 
     $(this).closest('tr').removeClass('highlight'); 
 
     $(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight'); 
 
    }); 
 
});

.highlight { 
 
    background-color:lightgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <table border="1px"> 
 
     <tr> 
 
      <td> 
 
       <table style="width:100%"> 
 
        <tr title="Table Header"> 
 
         <td> 
 
          Title 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <table border="1px"> 
 
        <tr> 
 
         <td></td> 
 
         <td bgcolor="grey">Header1</td> 
 
         <td bgcolor="grey">Header2</td> 
 
         <td bgcolor="grey">Header3</td> 
 
         <td bgcolor="grey">Header4</td> 
 
         <td bgcolor="grey">Header5</td> 
 
        </tr> 
 
        
 
        <tr> 
 
         <td bgcolor="grey" class="myCell">Row1</td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell1 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell1 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell1 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell1 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell1 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell1 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell1 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell1 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell1 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell1 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
        </tr> 
 
        
 
        <tr> 
 
         <td bgcolor="grey" class="myCell">Row2</td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell2 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell2 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell2 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell2 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell2 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell2 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell2 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell2 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell2 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell2 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
        </tr> 
 
        
 
        
 
        <tr> 
 
         <td bgcolor="grey" class="myCell">Row3</td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell3 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell3 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell3 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell3 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell3 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell3 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell3 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell3 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
         <td class="myCell"> 
 
          <table> 
 
           <tr> 
 
            <td> 
 
             Cell3 
 
            </td> 
 
           </tr> 
 
           <tr> 
 
            <td class='innerCell'> 
 
             Inner cell3 
 
            </td> 
 
           </tr> 
 
          </table> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</div>

источник

2015-02-04 16:04:19 indubitablee

это лучше, чем решение, которое я собирал вместе. Вероятно, я поместил бы немного в качестве альтернативы .. но я уверен, что это решение jQuery намного быстрее, чем решение quaSelector vanilla, которое я буду добавлять. вот сравнимый тест производительности: http://jsperf.com/bubblehandlingeventlistener –

@indubitablee, спасибо за вашу поддержку. Тот же подход, как вы упомянули выше, отвечает, но только столбец выделяет не строку. Пожалуйста, найдите jsfiddle http://jsfiddle.net/0w9yo8x6/85/. Пожалуйста, представьте, какие изменения нужно сделать, чтобы выделить строки и столбцы. Спасибо .. – user222

@ user222, вы установили css каждого ряда instyle, выполнив: 'style =" background-color: rgb (252, 252, 252); "' который перезаписывает jquery добавленный класс 'highlight'. если вы удалите это из каждого '', он выделит строку, как ожидалось. см. http://jsfiddle.net/0w9yo8x6/86/ – indubitablee

попробовать это в вашем CSS:

td table td:hover{background-color:gray;}

источник

2015-02-04 15:29:13 Mimouni

Единственное выделение выделенной ячейки, я хочу выделить целую строку и столбец выбранной ячейки при наведении мыши[email protected] Mimouni – user222

Я могу использовать javascript/jquery. @ Ilyas Mimouni – user222

Поскольку вы вложенности таблиц два глубоко, ваш CSS должен выглядеть следующим образом:

table table tr:hover td { 
    background-color: #fbc93d; 
}

Вот пример, основанный на вашей скрипке:

Example

источник

2015-02-04 15:29:56

Я хочу выделить выбранную колонку вместе со строкой. Пожалуйста, предложите. @Josh Burgess – user222

@ user222, я подозреваю, что это будет реализация javascript. –

Example

Это не очень большая практика сдачи таблиц в таблицах ради него, пойти проверить, как использовать дивы и, возможно, наметить. Также рассмотрите, как создавать таблицы, используя thead, tbody и colgroups.

Надеюсь, что смогу помочь.

Ниже приведена только HTML-код, и вам необходимо добавить к ней ада и тём, я дам вам понять, что один из них.

<table border="1px"> 
    <colgroup></colgroup> 
<colgroup></colgroup> 
<colgroup></colgroup> 
<colgroup></colgroup> 
<colgroup></colgroup> 
    <tr> 
    <td></td> 
    <td bgcolor="grey">Header1</td> 
    <td bgcolor="grey">Header2</td> 
    <td bgcolor="grey">Header3</td> 
    <td bgcolor="grey">Header4</td> 
    <td bgcolor="grey">Header5</td> 
    </tr> 

<tr> 
    <td bgcolor="grey">Row1</td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell1 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell1 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell1 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell1 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell1 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell1 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell1 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell1 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell1 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell1 
     </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 

    <tr> 
    <td bgcolor="grey">Row2</td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell2 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell2 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell2 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell2 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell2 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell2 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell2 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell2 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell2 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell2 
     </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 


    <tr> 
    <td bgcolor="grey">Row3</td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell3 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell3 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell3 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell3 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell3 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell3 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell3 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell3 
     </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table> 
     <tr> 
     <td> 
      Cell3 
     </td> 
     </tr> 
     <tr> 
     <td class='innerCell'> 
     Inner cell3 
     </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    </table>

источник

2015-02-04 15:55:24 cusackBOOM

выделите выделенную строку и столбец на mouseover в таблице html.

ответ

Example

Смежные вопросы