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>

注意：此处类名称= gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand

我试图根据下面的某些条件对此行应用css样式（显示）两种方式

$（ 'gridrowtaskIdlevel0。 '）addClass（' E-隐藏'）;

CSS：

.e-hide{
display:none;
}

2。 $（ 'gridrowtaskIdlevel0 '）的CSS（{' 显示 '：' 无'}）;

如何在运行时将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（与您的相同）。

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

祝你好运！

Answer 2

<tr>并不总是适用于所有风格。

以下是一个示例FIDDLE，展示了如何关注<td>。

CSS

table {
    border-collapse: collapse;
}
tbody, th, td {
    padding:0px;
    margin:0px;
    border:0px;
    border-collapse: collapse;
    padding: 5px;
}

tr.foo {
    border: 1px solid blue;
    background-color: red;
}
tr:nth-child(3) td {
    border-top: 2px solid blue;
    border-bottom: 2px solid blue;
}
tr:nth-child(3) td:nth-child(1){
    border-left: 2px solid blue;
}
tr:nth-child(3) td:nth-child(2){
    border-right: 2px solid blue;
}

表行中的CSS样式问题

2 个答案: