javascript - 表格行中的 CSS 样式问题

Question

我在下面的代码片段中使用了 className。

代码片段

<tr class="gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand">
    <td class="e-rowcell ">
        <div style="height: 20px;">
            <div class="intend" style="width: 0px; height: 1px; float: left; display: inline-block;">
            </div>

            <div class="e-gridtreeexpand" style="float: left; display: inline-block;">
            </div>

            <div class="e-cell" style="width: 100%; display: inline-block;">
                6
            </div>
        </div>
    </td>

    <td class="e-rowcell">Implementation Phase 2</td>
    <td class="e-rowcell">02/15/2010</td>
    <td class="e-rowcell"></td>
    <td class="e-rowcell">8</td>
    <td class="e-rowcell">50</td>
    <td class="e-rowcell"></td>
    <td class="e-extendcolumn"></td>
</tr>

注意:这里class Name = gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand

我已尝试根据以下条件为该行应用 css 样式(显示)
两种方式

1. $('.gridrowtaskIdlevel0').addClass('电子隐藏');

CSS:

.e-hide{
display:none;
}

2。 $('.gridrowtaskIdlevel0').css({'display':'none'});

如何在运行时将css样式应用到tr

Answer 1

不太明白运行时是什么意思，但如果您只需要让这段代码正常工作 - 您需要将它放在某个事件中:单击 smth、doc.ready 等。

请尝试这样的结构:

JS:

$(document).ready(function() {
    $('.gridrowtaskIdlevel0').addClass('e-hide');      // the 1st way
    // or
    $('.gridrowtaskIdlevel0').css({'display':'none'}); // the 2nd way
    // or
    $('.gridrowtaskIdlevel0').hide();                  // the 3rd way
});

但是如果您将使用第一种方式，您还需要添加 css(与您的相同)。

我建议使用第一个或第三个变体，但它们的工作方式都相似。

祝你好运!