Question

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

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

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

不幸的是，我的Javascript技能充其量只是业余爱好者，因此我尝试修改其中任何一项都是徒劳无功的。

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

Answer 1

好吧，这适用于IE7，IE8，IE9，FireFox 14和Chrome 21（fiddle）。

基于列的方法：当鼠标进入/离开单元格时，按索引查找相应的<col />并应用/删除以下类：

.hovered
{
    background-color: #FF0000;    
}

标记（不要忘记那些<col />）：

<table id="myTable">
    <col />
    <col />
    <col />
    <tbody>
        <tr>           
            <td>Col1</td><td>Col2</td><td>Col3</td>
        </tr> 
        <tr>           
            <td>Col1</td><td>Col2</td><td>Col3</td>
        </tr> 
        <tr>           
            <td>Col1</td><td>Col2</td><td>Col3</td>
        </tr> 
    </tbody>
</table>

大脑：

window.onload = function(){  
    var myTable = document.getElementById("myTable");
    var cols = myTable.getElementsByTagName("col");       
    bind(myTable, "mouseover", function (e) {
        if (e.target.nodeName === "TD") {        
            for(var i = 0; i < cols.length; i++){
                cols[i].className = i === e.target.cellIndex ? "hovered" : null;
            }
        }
    });        
    bind(myTable, "mouseout", function (e) {
        if (e.target.nodeName === "TD" && !isDescendant(e.relatedTarget,e.target)) {
            cols[e.target.cellIndex].className = null;
        }
    });     
};

...以及上面引用的两个辅助函数：

function bind(elem, eventName, handler){
    if(elem.addEventListener){
        elem.addEventListener(eventName, handler, false);
    } else {
        elem.attachEvent("on"+eventName, function(e){
            e = e || window.event;
            e.target = e.target || e.srcElement;
            e.relatedTarget = e.relatedTarget || e.toElement;                                                
            handler.call(this, e);                        
        });
    }
}
function isDescendant(element, ancestor){
    while(element && (element = element.parentNode)){
        if (element === ancestor) {
            return true;   
        }
    }        
    return false;
}

Answer 2

以下是您的代码（+ demo）：

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

Answer 3

我能想到的最佳方法是给每个<td>一个类名，用于标识它所在的列。即“col1，col2等”

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

Answer 4

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

Answer 5

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

表中的每个单元格（<td>）都通过伪元素进行了填充，用于创建悬停效果。为了确保悬停效果不会超出表格本身，请使用overflow: hidden。

文章中的小标题概括了这一切：“诀窍是在<td>上使用巨大的伪元素，这些元素被表溢出掩盖了”

Answer 6

尝试

<td onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';">

Answer 7

这样可以，不需要javascript。因此即使人们关闭javascript也应该有效。

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

HTML：

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

纯Javascript表列悬停效果？

7 个答案: