TR Css Class 与之前的 TR 相同答案

【问题标题】：TR Css Class same as TR before itTR Css Class 与之前的 TR 相同
【发布时间】：2013-08-25 11:37:37
【问题描述】：

我有一张桌子，我希望某些 tr 具有与它之前的 tr 相同的 css 类。

在下面的示例中，带有 class="?" 的 tr应该与上面的类相同。这可能吗？

<table>
  <tr class="red">
    <td></td>
  </tr>
  <tr class="?">
    <td></td>
  </tr>
  <tr class="blue">
    <td></td>
  </tr>
  <tr class="?">
    <td></td>
  </tr>
</table>

【问题讨论】：

您是否要进行表格条带化？
@KarlAnderson 在某种程度上是的，但不是奇数甚至奇数。该表可能有一次是 3 红 2 蓝，另一次是 2 红 6 蓝。
你想动态设置这个新类吗？那么你需要javascript来做到这一点。如果没有，您应该在将 html 提供给客户端之前在服务器端执行此操作。
什么决定了颜色？您可以使用它来帮助确定需要使用的逻辑代码。

标签： html asp.net css html-table

【解决方案1】：

基于卡尔的想法。

使用 Jquery

http://jsfiddle.net/forX/KBfzD/

$(function(){
    $(".unknown").each(function()
                       {

                           $(this).removeClass("unknown");
                           $(this).addClass( 
                                           $(this)
                                          .prev()
                                           .attr("class")
                           );
                       });
});

我改变了？为未知。我不知道怎么用？在 css/css 选择器中。

【讨论】：

@NicoTek 即使我在使用“？”的 jsfiddle 中也做了类似的事情作为使用 jquery 的选择器

【解决方案2】：

试试这个：

HTML：

<table border="1" style="border-collapse:collapse;">
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td></tr>
</table>

jQuery:

$(function(){
    $("tr").addClass("red");
    $("tr:nth-child(4n)").removeClass("red").addClass("blue")
        .prev().removeClass("red").addClass("blue");
});

这将选择每第 4 个子元素，删除红色 CSS 类，添加蓝色 CSS 类并移动到前一个元素并执行相同操作。

注意：这是一个jsFiddle，您可以随意使用它。

【讨论】：

【解决方案3】：

每个 html 元素都可以用 css 寻址，所以在 css 的 stylesheet 中，如果你像 element{ set the desired property ; } 一样贴花
在这种情况下，元素将是 tr 所有表格行都将具有您在上面的一般声明中设置的属性，如果您想将特定值覆盖到您的某些 table rows 中，您可以解决他们喜欢使用 class

【讨论】：

【解决方案4】：

我不太确定是否理解这个问题，但是：
在 css 中：tr.classname + tr 为您提供来自 tr 的下一个 tr ，它有一个类名。看到这个Fiddle。
您也可以结帐css nth-child,even & odd selectors。

【讨论】：

这不是他问@David的问题

【解决方案5】：

根据您提到的，this is the fiddle。它只检查类的前一个元素：?

【讨论】：

【解决方案6】：

没有 javascript，您可以使用 element:li:nth-child(x) 值可以是 n、n+1、2n+1 等任何东西……你可以给它们不同的值。

【讨论】：