javascript - 是否可以仅使用 CSS 和单元格的 td 值动态地为 html 表格分配边框？

Question

我有来自加载到 html 表中的数据库的数据。因此，我不能轻易地向 td 添加不同的类和 id。

所以我在一个表中有一个值表，称之为表 1。然后我在一个单独的查询中有另一组值，其中包含每个“组”的值。这被加载到一个 html 变量中，该变量被加载到一个非显示表中，称为表 2。表 2 中的组值是我想用来分配表 1 中的新边框的值。表 1 中的值无关紧要。

所以基本上，我想使用表 2 的值来分配表 1 的边框。表 2 中的值是这样的(如果可能，我不想更改这些值):

0   1.1   1.2   1.3   2.1   2.2   2.3   3.1

我会为每个组号(例如 1.1)分配一个特定的边框样式，该样式将应用于另一个表。

我对所有这些东西都不太了解，但很多时候我不知道我想做的事情是否可行。因此，如果您有任何想法或者您认为这不会发生，请告诉我。

我能够合并 javascript、jquery、sql、css 和 html 元素，但这在本地机器上运行，所以没有 php 等。数据来自数据库，所以如果有通过 sql 应用某些东西的技巧记住这个想法。

这是一个旧的 fiddle ，显示使用 html 表字符串作为变量(而不是源自 sql)加载的“表 1”。这不是它目前的工作方式，但它显示了它的样子。

Sample fiddle滑动 slider ，数据就会出现。

表 1 中有一堆值。我将加载另一个表，表 2，其中包含组值，我想将其应用于表 1。

感谢您的协助!

Answer 1

因为 html 不使用变量，我相信你指的是 javascript 变量。让我们调用您将在组中存储“组”的变量。

 var group = document.getElementById('table2').value

如果您想将 table1 的边框颜色基于存储在 table2 字段中的值，请尝试类似以下 switch(case) 语句的内容。显然，您将替换您在 table2 中引用的实际 div id 和您分配给 table1 的实际 div id。这只是您可以用作模板的概述。例如，如果您想更改边框宽度而不是颜色，您的代码块将是 document.getElementById('table1').style.borderWidth = "thick"; ETC。

  switch(group){
    case 0:
    document.getElementById('table1').style.borderColor = "red";
    break;
    case 1.1:
    document.getElementById('table1').style.borderColor = "blue";
    break;
    case 1.2:
    document.getElementById('table1').style.borderColor = "yellow";
    default:
    document.getElementById('table1').style.borderColor = "black";<p></p>

}