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

Posted 2023-03-23

【中文标题】是否可以仅使用 CSS 和单元格的 td 值动态地将边框分配给 html 表格？

【英文标题】：Is it possible to assign borders to an html table dynamically using CSS and the td value of the cell only?

【发布时间】：2014-10-17 14:44:39

【问题描述】：

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

所以我在一个表中有一个值表，称之为表 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 应用某些东西的技巧记住这个想法。

这是一个旧小提琴，显示使用 html 表字符串作为变量（而不是源自 sql）加载的“表 1”。这不是它目前的工作方式，但它显示了它的外观。

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

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

感谢您的帮助！

【问题讨论】：

在表格布局中使用虚拟数据的某种小提琴或演示会很有帮助。

如果可以的话，我会的，但它的设置方式只能在本地机器上运行，并有一些棘手的解决方法。它不是在 sql server 上运行，而是在 access DB 本地 js 访问脚本上运行。

如果您可以分配 id 和 td，您可能可以使用该“html 变量”，而不是创建非显示表，而是使用 js/jquery 遍历此变量并创建表 1 所需的 css .

我不确定我是否可以，因为数据来自 sql 查询并被解析为 html。包含表 1 中数据的表不包含表 2 中包含组的数据。除非有人知道如何做一些 sql 技巧。

为什么不使用您想要的样式规则创建一个新表，并使用通过 javascript 加载的表数据填充它？

【参考方案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";等等

  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";

【讨论】：

是的，我知道 html 没有变量。 html 表作为变量存储在 JavaScript 中，但这不是我在新版本中的做法。