javascript - 如何在鼠标悬停时将 CSS 类动态添加到表格行

标签 javascript jquery html css

<分区>

我试图在特定行上突出显示一行。我不得不使用鼠标悬停。

但这对我来说并没有发生。

这是cshtml中的表格定义。

                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th class="severityCheck"><input type="checkbox" value="" /></th>
                                            <th>Customer Name</th>
                                            <th>Site Name</th>

                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach:CustomerList">
                                        <tr onclick="removepage();" onmouseover="changeRowColor(this)">

                                            <td>
                                                <input class="checkbox" data-bind="attr: { Id: 'checkbox' + $data.Id },click:$parent.customerClick" type="checkbox">

                                            </td>
                                            <td class="col-md-4">
                                                <span class="name" data-bind="text:customerName" />

                                            </td>
                                            <td>
                                                <span data-bind="text:siteName" />
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>

为了突出显示鼠标悬停,我将 changeRowColor 写为:

function changeRowColor(row) {
    row.addClass = 'active';

}

但是这个类并没有被反射(reflect)出来。但是当我这样做的时候

row.style.backgroundColor= 'red'; 

它正在发生。

我做错了什么?

此外,我必须仅在鼠标位于其上时突出显示当前行,而在鼠标离开时不突出显示。

我该怎么做?

最佳答案

为什么不用css

table tr:hover td{background-color:red;}

关于javascript - 如何在鼠标悬停时将 CSS 类动态添加到表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39718601/

相关文章:

jQuery/CSS : proper way to hide a column

css - 为什么当我更改 margin-top 时我的整个页面都会移动?

javascript - 如何在html中显示外部pdf

javascript - JS '+' 运算符未从 getElementById 执行数值加法

jquery - 如何在jquery中引用JSF组件Id?

javascript - 切换链接 HREF

html - 那么,如果自定义 HTML 属性不是有效的 XHTML 怎么办?

javascript - IE8中无法获取对象属性

javascript - ExtJS:如何将 itemSelector 用于具有嵌套循环的 XTemplate?

javascript - Xceed MaskedTextBox 在聚焦时不会从头开始