Javascript 基于div ID的彩色HTML表

我有一个Django模板，我将一堆HTML表传递给它。我想将某些表格上的背景颜色更改为红色，并允许其他表格使用我设置的默认CSS。这些表是从我的Django视图在一个名为

html

的字典中传入的，其结构如下：

{'PanelLabel1': {'Scheduled':[list of html tables],
                 'Unscheduled':[list of html tables]},
 'PanelLabel2': {'Scheduled':[list of html tables],
                 'Unscheduled':[list of html tables]}
}

我尝试在模板中的非计划表中添加一个div ID，然后根据div ID更改颜色，但是在正确设置div ID时遇到了问题

我的模板如下所示：

  {% for label,tables in html.items %}
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="text-center">{{ label | safe }}</h4>
        </div>
        {% for types,table in tables.items %}
          <div class="panel-body">
            <div class="panel-title text-center"><u>{{types | safe}}</u>
              {% for t in table %}
                {% if types == "Unscheduled" %}
                  <div><p>Here</p></div>
                  <div class="table-responsive Unscheduled" id="Unscheduled">
                    {{ t | safe }}
                  </div>
                {% else %}
                  <div class="table-responsive">
                    {{ t | safe }}
                  </div>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endfor %}

<script>
$(document).ready(function(){
  var rows = document.getElementById("Unscheduled").getElementsByTagName("tr");
  var cells = document.getElementById("Unscheduled").getElementsByTagName("td");
  for (i = 0; i < rows.length; i++){
    rows[i].style.backgroundColor = "#CC3300";
  };
});
</script>

.Unscheduled {
    background: #CC3300;
 }

当我查看开发人员控制台时，我可以看到没有一个表div有ID（当我尝试使用该类时，没有一个表div有

未计划的
类），因此设置表颜色的javascript失败，CSS没有任何样式。我不确定我在设置div ID/class时做错了什么。无论我做什么，总是这样：
可能是因为您在许多情况下（视图、id）使用相同的id“未计划”，这会产生冲突。尝试为css类添加一个不同的名称（比如“tablestyle”之类），同时从div标签中删除id标记，只留下class参数。告诉我它是如何运行的。
给你想要的每个表格一个特定的颜色id。例如：
然后像这样使用CSS
#你的选择{背景色：红色；}
你可以选择我喜欢的任何颜色。
给表格上色的更简单更好的方法是使用CSS。可以使用
class
属性而不是
id
属性。如果要为单元格定义某种样式，应该使用CSS类而不是id。此外，ID属性每页都应该是唯一的。@请参阅我对问题所做的编辑。我试着给div一个特殊的类，但在呈现的模板中也没有显示出来。@kdubs您的CSS语法不太正确。删除
“.Unscheduled”
并将
tr
更改为
.Unscheduled
。像这样：
.Unscheduled{background:#CC3300；}
@asah修复了这个问题，但是仍然存在着类在渲染时不显示在div中的问题。我在开发者控制台中添加了代码。