cols, colgroups и css: hover psuedoclass - PullRequest
Новая
       31

cols, colgroups и css: hover psuedoclass

30 голосов
/ 11 мая 2009

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

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

Поскольку таблица будет содержать как метрические, так и имперские измерения, hover не обязательно останавливаться на ячейке (с любого направления) и, фактически, будет бонусом, если она будет продолжаться от одной оси к другой. Я также использую 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-подопечные?

Ответы [ 5 ]

55 голосов
/ 24 июня 2012

Вот чистый метод CSS, не использующий Javascript.

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

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

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

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

Выход:

enter image description here

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>
9 голосов
/ 11 мая 2009

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

4 голосов
/ 11 мая 2009

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

Никогда даже не видел :hover работы над col / colgroup, поэтому не уверен, что это возможно ...

Думаю, вы застряли с реализацией Javascript.

Вот пример здесь , который работает (строки и столбцы) в Firefox но опять же он не работает в IE ... cols не работают.

1 голос
/ 16 октября 2014

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

// 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");
        }
    });
})

Проверьте скрипку здесь

0 голосов
/ 08 марта 2017

Живой ответ (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));
}

Вот скрипка

...