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

Question

I have data coming in from a database that is loaded into an html table. Because of this, I can't easily add different classes and id's to td's.

So I have a table of values in a table, call it table 1. Then I have another set of values in a separate query that have the values of each "group". This is loaded into an html variable which is loaded into a non-displaying table, call this table 2. The group values in table 2 are what I want to use to assign the new borders in table 1 with. The values in table 1 don't matter.

So essentially, I want to use table 2 values to assign the borders on table 1. The values in table 2 are like this (I'd prefer not to change these if possible):

0   1.1   1.2   1.3   2.1   2.2   2.3   3.1

I would assign each group number (1.1 for example) with a certain border style which would apply to the other table.

I'm not too savvy with all of this stuff yet so often times I don't know if what I want to do is possible or not. So please let me know if you have any ideas or if you think it's just not going to happen.

I'm able to incorporate javascript, jquery, sql, css and html elements, but this runs on a local machine so no php, etc. The data comes from a database so if there is a trick to applying something through sql keep that idea in mind.

Here is an old fiddle showing the "table 1" loaded using html table strings as variables (instead of originating from sql). This is not how it currently works, but it shows what it looks like.

Sample fiddle Slide the sliders and the data will appear.

The table 1 has a bunch of values in it. I will load another table, table 2, that will have the group values in it and I want to apply this to the table 1.

Thanks for the assist!

Answer 1

since html doesn't use variables, I believe you mean javascript variables. let us call the variable you will store your "group" in group.

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

if you want to base your border color for table1 on the value stored in a field of table2, try something like the following switch(case) statement. Obviously, you will substitute the actual div id you are referencing in table2 and the actual div id you assign to your table1. This is just an overview you can use as a template. For instance, if you want to change the border width, instead of color, your code blocks would be 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"; 
 
\n\n
 }