3

我需要 HTML 表格列的纯 Javascript（无 jQuery）悬停效果。

我发现这个据说包含 Firefox 的修复程序，但对我来说它仍然看起来很糟糕。

我发现这仅适用于第一列。

不幸的是，我的 Javascript 技能充其量是业余的，所以我尝试修改其中任何一个都没有结果。

这可能吗？任何建议，将不胜感激。

4

7 回答 7

7

这是一种基于列的方法。当鼠标进入/离开单元格时，<col/>通过索引找到对应的单元格并应用/删除所需的类：

(() => {
  const myTable = document.getElementById("myTable");
  const cols = myTable.querySelectorAll("col");
  const events = {
    mouseover: e => {
      const t = e.target.closest("td");
      if (t) {
        const cellIndex = t.cellIndex;
        for (let i = 0, n = cols.length; i < n; i++) {
          cols[i].classList[i === cellIndex ? "add" : "remove"]("hovered");
        }
      }
    },
    mouseout: e => {
      const t = e.target;
      if (t.nodeName === "TD" && !t.contains(e.relatedTarget)) {
        cols[t.cellIndex].classList.remove("hovered");
      }
    }
  };
  for (let event in events) {
    myTable.addEventListener(event, events[event]);
  }
})();
.hovered {
  background-color: #FF0000;
}
<table id="myTable" cellspacing="0">
  <col />
  <col />
  <col />
  <tbody>
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col2
        <span>nested</span>
      </td>
      <td>Col3</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
    </tr>
  </tbody>
</table>

也可以看看：

于 2012-08-15T19:25:34.940 回答
2

这是您的代码（+演示）：

var HOVER_CLASS = 'hovered';
var hovered;

table.addEventListener('mouseover', function (e) {
    if (e.target.tagName.toLowerCase() == 'td') {
        var index = e.target.cellIndex;

        hovered && hovered.forEach(function (cell) {
            cell.classList.remove(HOVER_CLASS);
        });

        hovered = Array.prototype.map.call(
            table.rows,
            function (row) {
                var i = index;
                while (!cell && i >= 0) {
                    var cell = row.cells[i];
                    i -= 1;
                }
                return cell;
            }
        );

        hovered.forEach(function (cell) {
            cell.classList.add(HOVER_CLASS);
        });
    }
}, true);

table.addEventListener('mouseout', function (e) {
    hovered && hovered.forEach(function (cell) {
        cell.classList.remove(HOVER_CLASS);
    });
    hovered = null;
}, true);
于 2012-08-15T19:15:20.417 回答
1

我能想到的最好的方法是给每个<td>类名来标识它所在的列。即“col1、col2 等”

然后您可以使用该document.getElementsByClassName("colX")函数获取这些<td>s 的数组，遍历数组并修改样式。警告，这可能不适用于没有 getElementsByClassName 函数的旧浏览器，但您可以轻松找到解决方法。最好的方法是使用 jQuery，不知道你为什么反对它。

于 2012-08-15T18:58:43.617 回答
0

您在 css 中创建一个类

.HoverTabla > tbody > tr:hover,
.HoverTabla > tbody > tr:focus { 
    background-color: #42C6F7;
}

然后你从 html 中的表中调用它

<table class="table HoverTabla" id="tbl_Plan">

            <thead>
                <tr>
                    <th>Tipo de plan</th>
                    <th>Tiempo en días</th>
                    <th>Max. Usuario</th>
                    <th>Max. Capacidad</th>
                    <th>Max. Casos</th>
                    <th>Valor plan</th>
                    <th></th>
                </tr>
            </thead>
 </table>
于 2019-03-27T21:39:06.040 回答
0

经过一番谷歌搜索后，我找到了纯 CSS 的答案：https ://css-tricks.com/simple-css-row-column-highlighting/

表格中的每个单元格 ( <td>) 通过伪元素赋予一些填充，用于创建悬停效果。为了确保悬停效果不会超出表格本身，overflow: hidden使用了 an 。

文章中的副标题总结了这一切：“诀窍是在<td>s 上使用巨大的伪元素，被表格溢出隐藏”

于 2019-11-25T21:36:01.940 回答
-1

尝试

<td onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';">
于 2012-08-15T18:59:26.027 回答
-2

这将起作用，不需要javascript。因此，即使人们关闭了 javascript，它也应该可以工作。

Jfiddle：http: //jsfiddle.net/vJacZ/

​</p>

html:

​&lt;table>
<tr>
    <td class="column1">
        Column1
    </td>
    <td class="column2">
        Column2
    </td>
</tr>
</table>

CSS：

.column1{
    color:black;
}
.column1:hover{
    color:red;
}
.column2{
    color:black;
}
.column2:hover{
    color:green;
}
于 2012-08-15T19:00:31.237 回答