cols, colgroups и css: hover psuedoclass

Question

Я пытаюсь создать таблицу для отображения ИМТ человека.

Как часть этого, я хотел бы, на: парить, для <tr>и<col> (или) <colgroup> быть выделены также, для того, чтобы пересечение более очевидной.

Поскольку таблица будет содержать как метрические, так и имперские измерения, наведение не должно останавливаться в ячейке (с любого направления) и на самом деле было бы бонусом, если бы оно распространялось от одной оси к другой , Я также использую XHTML 1.1 Strict doctype, если это имеет значение?

Итак ... пример (реальная таблица в ... больше), но это должно быть репрезентативным:

<script> 

tr:hover {background-color: #ffa; } 

colgroup:hover, 
col:hover {background-color: #ffa; } 

</script> 

...

<table> 
    <col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup> 

    <tr> 
     <th></th> 
     <th>50kg</th> 
     <th>55kg</th> 
     <th>60kg</th> 
    </tr> 

    <tr> 
     <td>160cm</td> 
     <td>20</td> 
     <td>21</td> 
     <td>23</td> 
    </tr> 

    <tr> 
     <td>165cm</td> 
     <td>18</td> 
     <td>20</td> 
     <td>22</td> 
    </tr> 

    <tr> 
     <td>170cm</td> 
     <td>17</td> 
     <td>19</td> 
     <td>21</td> 
    </tr> 

</table> 

Могу ли я просить невозможного, сделать Мне нужно пойти в палату JQuery?

Answer 1

Вот чистый метод CSS без Javascript.

Я использовал ::before и ::after псевдоэлементы для выделения строк и столбцов. z-index сохраняет подсветку ниже <tds>, если вам нужно обработать события щелчка. position: absolute позволяет им покидать пределы <td>. overflow: hidden на <table> скрывает переполнение подсветки.

Это не было необходимо, но я также выбрал только строку или столбец, когда вы находитесь в заголовках. Классы .row и .col позаботятся об этом. Если вы хотите упростить, вы можете удалить их.

Это работает во всех современных браузерах (и изящно деградирует на старых браузерах, ничего не делая).

Демо: http://jsfiddle.net/ThinkingStiff/rUhCa/

Выход:

CSS:

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
    overflow: hidden; 
    z-index: 1; 
} 

td, th, .row, .col { 
    cursor: pointer; 
    padding: 10px; 
    position: relative; 
} 

td:hover::before, 
.row:hover::before { 
    background-color: #ffa; 
    content: '\00a0'; 
    height: 100%; 
    left: -5000px; 
    position: absolute; 
    top: 0; 
    width: 10000px; 
    z-index: -1;   
} 

td:hover::after, 
.col:hover::after { 
    background-color: #ffa; 
    content: '\00a0'; 
    height: 10000px;  
    left: 0; 
    position: absolute; 
    top: -5000px; 
    width: 100%; 
    z-index: -1;   
} 

HTML:

<table> 
    <tr> 
     <th></th> 
     <th class="col">50kg</th> 
     <th class="col">55kg</th> 
     <th class="col">60kg</th> 
     <th class="col">65kg</th> 
     <th class="col">70kg</th> 
    </tr> 
    <tr> 
     <th class="row">160cm</th> 
     <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> 
    </tr> 
    <tr> 
     <th class="row">165cm</th> 
     <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> 
    </tr> 
    <tr> 
     <th class="row">170cm</th> 
     <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> 
    </tr> 
    <tr> 
     <th class="row">175cm</th> 
     <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> 
    </tr> 
</table> 

Answer 2

AFAIK CSS Hovers on TR не поддерживается в IE, так что в лучшем случае часть TR будет работать только в Firefox.

Никогда даже не видел :hover работу над COL/COLGROUP поэтому не уверен, если это возможно ...

Think вы можете быть застрял с реализацией Javascript.

Theres примера here, который работает (строки & Cols) в Firefox но опять ее нарушенные в IE ... смещ_по_столбцы не работает.

Answer 3

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

Answer 4

I наткнулся на этом аккуратном способ сделать это его от css-tricks.com я также подготовил скрипку, пока не возиться с ним ничего фантазией, но и может получить идею ИТС с тем же кодом, оказываемого этой CSS-трик страницей

// кода HTML

<table> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <thead> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
</table> 

// Js

$(function(){ 
    $("table").delegate('td','mouseover mouseleave', function(e) { 
     if (e.type == 'mouseover') { 
      $(this).parent().addClass("hover"); 
      $("colgroup").eq($(this).index()).addClass("hover"); 
     } 
     else { 
      $(this).parent().removeClass("hover"); 
      $("colgroup").eq($(this).index()).removeClass("hover"); 
     } 
    }); 
}) 

Check out the fiddle here

Answer 5

Живой ответ (https://jsfiddle.net/craig1123/d7105gLf/)

Есть ответы CSS и JQuery; однако я написал простой ответ на javascript.

Я сначала найти все col и td тегов, получить индекс столбца каждой ячейки, делая element.cellIndex, а затем добавить класс CSS с фоном на mouseenter и удаление его на mouseleave.

HTML

<table id='table'> 
    <col /> 
    <col /> 
    <col /> 
    <col /> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>Birthdate</th> 
     <th>Preferred Hat Style</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Abraham Lincoln</td> 
     <td>204</td> 
     <td>February 12</td> 
     <td>Stovepipe</td> 
    </tr> 
    <tr> 
     <td>Winston Churchill</td> 
     <td>139</td> 
     <td>November 30</td> 
     <td>Homburg</td> 
    </tr> 
    <tr> 
     <td>Rob Glazebrook</td> 
     <td>32</td> 
     <td>August 6</td> 
     <td>Flat Cap</td> 
    </tr> 
    </tbody> 
</table> 

CSS

body { 
    font: 16px/1.5 Helvetica, Arial, sans-serif; 
} 

table { 
    width: 80%; 
    margin: 20px auto; 
    border-collapse: collapse; 
} 
table th { 
    text-align: left; 
} 
table tr, table col { 
    transition: all .3s; 
} 
table tbody tr:hover { 
    background-color: rgba(0, 140, 203, 0.2); 
} 
table col.hover { 
    background-color: rgba(0, 140, 203, 0.2); 
} 
tr, col { 
    transition: all .3s; 
} 
tbody tr:hover { 
    background-color: rgba(0,140,203,.2); 
} 
col.hover { 
    background-color: rgba(0,140,203,.2); 
} 

JS

const col = table.getElementsByTagName('col'); 
const td = document.getElementsByTagName('td'); 

const columnEnter = (i) => col[i].classList.add('hover'); 
const columnLeave = (i) => col[i].classList.remove('hover'); 

for (const cell of td) { 
    const index = cell.cellIndex; 
    cell.addEventListener('mouseenter', columnEnter.bind(this, index)); 
    cell.addEventListener('mouseleave', columnLeave.bind(this, index)); 
} 

Here is a fiddle