groupes, Col. col et css classe: hover pseudo

Question

Je suis en train de créer une table pour afficher l'IMC d'un individu.

Dans le cadre de cela, je voudrais, sur: hover, pour la <tr> et <col> (ou <colgroup>) être mis en évidence aussi, pour que l'intersection être plus apparente.

Comme le tableau comprendra à la fois des mesures métriques et impériales, le: hover ne pas arrêter à la cellule (dans toutes les directions) et serait, en fait, un bonus si étendu d'un axe à l'autre. J'utilise aussi le XHTML 1.1 Strict doctype, si cela fait une différence?

Alors ... un exemple (le vrai tableau de ... plus), mais cela devrait être représentatif:

<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>

Suis-je demander l'impossible, ai-je besoin d'aller JQuery-pupilles?

Answer 1

Voici une méthode pure CSS en utilisant pas Javascript.

je ::before et ::after pseudo-éléments pour faire la ligne et la colonne en surbrillance. Conserve la mise en évidence z-index ci-dessous le au cas où vous <tds> devez gérer les événements de clic. Leur permet de position: absolute quitter les limites du <td>. Sur le overflow: hidden cache le trop-plein <table> de surbrillance.

Il n'a pas été nécessaire, mais j'ai aussi fait il suffit de sélectionner la ligne ou la colonne lorsque vous êtes dans les en-têtes. Le cours .row et prendre soin .col de cela. Si vous souhaitez la simplifier, vous pouvez les supprimer.

Cela fonctionne dans tous les navigateurs modernes (et se dégrade avec élégance sur les anciens navigateurs en ne faisant rien).

Démo: http://jsfiddle.net/ThinkingStiff/rUhCa/

Sortie:

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

Il y a un plugin jQuery très décent, je suis tombé sur situé ici qui fait un très bon travail de ce genre de chose avec des charges d'exemples. De manière préférentielle j'utiliser.

Answer 3

CSS AFAIK sur les survols de ne sont pas pris en charge dans IE de toute façon TR, donc au mieux la partie TR qui ne fonctionne que dans Firefox.

même jamais vu un travail sur un col :hover / colgroup donc pas sûr si cela est possible ...

Pensez-vous pourriez être coincé avec une implémentation Javascript.

Theres un exemple qui fonctionne (lignes et CLO) dans Firefox mais encore une fois ses brisées dans IE ... Col. ne fonctionnent pas.

Answer 4

Je suis tombé sur cette belle façon de le faire à partir de son css-tricks.com Je prépare aussi un violon tout en déconner avec elle, mais rien de fantaisie u peut avoir l'idée de son avec le même code fourni par cette page css-trick

// Le 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>

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

Consultez le violon ici

Answer 5

Réponse en direct ( https://jsfiddle.net/craig1123/d7105gLf/ )

Il existe déjà des réponses CSS et JQuery; cependant, j'ai écrit une réponse simple pur javascript.

Je trouve d'abord toutes les balises col et td, obtenir l'index de colonne de chaque cellule en faisant element.cellIndex, puis ajoutez une classe CSS avec un fond sur et en le retirant mouseenter sur 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));
}

Voici un violon