cols, gruppi Col e css: hover classe pseudo

Question

Sto cercando di creare una tabella per visualizzare BMI di un individuo.

Come parte di questo, vorrei, on: hover, per la <tr> e <col> (o <colgroup>) da evidenziare anche, in modo che l'intersezione di essere più evidente.

Come risulta dalla tabella conterrà misurazioni sia metriche e in pollici, il: hover non deve fermarsi alla cella (da qualsiasi direzione) e sarebbe, infatti, essere un vantaggio se estesa da un asse all'altro. Sto anche utilizzando il doctype XHTML 1.1 Strict, se questo fa la differenza?

Quindi ... un esempio (il vero del tavolo ... più grande), ma questo dovrebbe essere rappresentativo:

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

Sono io a chiedere l'impossibile, devo andare JQuery-reparti?

Answer 1

Ecco un metodo CSS puro senza usare Javascript.

Ho usato ::before e ::after pseudo-elementi per fare l'evidenziazione riga e colonna. z-index mantiene l'evidenziazione al di sotto del <tds> nel caso in cui è necessario gestire eventi click. position: absolute permette loro di lasciare i confini della <td>. overflow: hidden sul <table> nasconde l'overflow clou.

Non è stato necessario, ma ho anche reso selezionare solo la riga o colonna quando sei nelle intestazioni. Il .row e .col classi prendersi cura di questo. Se si desidera che il semplificare, è possibile rimuoverli.

Questo funziona in tutti i browser moderni (e degrada con grazia il browser più vecchi non facendo nulla).

Demo: http://jsfiddle.net/ThinkingStiff/rUhCa/

Output:

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

Non è un plugin jQuery molto dignitoso che ho incontrato rel="noreferrer"> che fa un ottimo lavoro di questo genere di cose con un sacco di esempi. Preferibilmente userei questo.

Answer 3

Per quanto ne sappia CSS aleggia sulla s 'TR non sono supportati in IE comunque, così al meglio la parte di TR che funziona solo in Firefox.

mai visto un'opera :hover su un colle / colgroup quindi non so se è possibile ...

che si potrebbe essere bloccato con un'implementazione JavaScript.

Theres un esempio qui che funziona (righe e cols) in Firefox ma ancora una volta le sue rotte in IE ... cols non funzionano.

Answer 4

Sono venuto incontrato questo modo pulito di farlo proprio da css-tricks.com ho anche preparato un violino, mentre fare in giro con esso niente di speciale ma u può ottenere l'idea propria con lo stesso codice fornito da tale pagina css-trick

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

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

Scopri il violino qui

Answer 5

Risposta diretta ( https://jsfiddle.net/craig1123/d7105gLf/ )

Ci sono già CSS e jQuery risposte; tuttavia, ho scritto una risposta semplice javascript puro.

ho trovate tutte le col e td tag, ottengo l'indice di colonna di ogni cella facendo element.cellIndex, e quindi aggiungere una classe CSS con uno sfondo sul mouseenter e la rimozione su 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));
}

Ecco un violino