javascript - 基于 div ID 的 HTML 表格颜色

Question

我有一个 Django 模板，我向其中传递了一堆 HTML 表格。我想将某些表格的背景颜色更改为红色，并允许其余表格使用我设置的默认 CSS。这些表是从我的 Django View 传递到一个名为 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>

编辑 我还尝试向 div 添加一个 Unscheduled 类，然后使用 CSS 对其进行样式设置，如下所示:

.Unscheduled {
    background: #CC3300;
 }

当我查看开发人员控制台时，我可以看到所有表 div 都没有 ID(当我尝试使用该类时，它们都没有 Unscheduled 类)，所以我的设置表格颜色的 javascript 失败，CSS 没有任何样式。我不确定我在设置 div ID/类时做错了什么。无论我做什么，看起来总是这样:

Answer 1

也许是因为您在许多实例中“未计划”使用相同的 id( View 、id's)，并且存在冲突。尝试为 css 类指定不同的名称(例如“tablestyle”或其他名称)，并且从 div 标签中删除 id 标签，只留下类参数。告诉我进展如何。