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

时间:2016-09-27 07:26:34

标签: javascript jquery html css

我正在尝试在特定行上突出显示一行。我不得不使用onmouseover。

但事实并非如此。

这是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';

}

但课程没有得到反映。但是当我做的时候

row.style.backgroundColor= 'red'; 

它正在发生。

我做错了什么?

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

我该怎么做?

1 个答案:

答案 0 :(得分:2)

为什么不使用css

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