代码之家 › 专栏 › 技术社区 › David Thomas

cols、colgroups和css:hover psuedoclass

col html-table xhtml css

David Thomas · 技术社区 · 15 年前

我试图创建一个表格来显示个人的体重指数。

作为其中的一部分,我希望:悬停,为 <tr> 和 <col> (或) <colgroup> )也要突出显示,以便交叉口更明显。

由于表格将同时采用公制和英制测量,所以:悬停不必停在单元格(从任何方向)上,实际上,如果它从一个轴延伸到另一个轴,将是一个额外收获。我也在使用XHTML 1.1严格的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 回复 | 直到 7 年前

ThinkingStiff 9 年前

这里有一个不使用JavaScript的纯CSS方法。

我用过 ::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>

Kieran Senior 15 年前

我遇到了一个非常不错的jquery插件 located here 这是一个很好的例子。我宁愿用那个。

Eoin Campbell 15 年前

Afaik CSS悬停 TR 无论如何,IE中不支持的,所以它的tr部分最多只能在Firefox中工作。

从来没见过 :hover 在col/colgroup上工作,所以不确定这是否可行…

您可能会被一个JavaScript实现所困扰。

有一个例子 here 在Firefox中有效(行和列) 但它又被打断了…小马不工作。

Egli Becerra 10 年前

我偶然发现了这种干净利落的方法 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

Craig1123 7 年前

现场应答(现场应答) 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);
}

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