Question JS, changing element colors

[Tsumiasu]

Hey everyone,

I've been trying to create a script (via TamperMonkey) that will allow me to change the color of a single table on a web page based on a value. I'm fairly new to JS and thus have not been able to locate the correct algorithm. Another option I was considering was possibility a new table with the value I need pulled or altering a table already on the page. I've tried searching, however the answers are always only about one or the other and not the complete concept. I cannot share the web page as it is work related, however, I can answer any questions; including with the code.

I've attempted a few things but I will start from scratch and try them again, in case I made an error somewhere.

 

[Ken g6]

I have lots of questions to pick this apart.

First, change what type of color? Text color? Background color? Border colors? For the whole table or just some cells? I suggest you try to modify the table color in dev tools manually; then tell us which properties of which element(s) (table, tr, th, and/or td, probably) you had to modify.

Second, where is the value to be used in the color? Is it part of the page originally? Is it constant per URL? Or perhaps it's constant for a limited set of values like id or class names? Do you want to enter it into a field on the page?

Part of what I'm doing here is breaking the problem into a series of steps. Each step can be broken down into smaller steps. One good way to develop a program is to write each of these steps and sub-steps as comments, until you have the problem broken down enough that you can figure out the code necessary to do each and every step.

 

[Tsumiasu]

I have lots of questions to pick this apart.

First, change what type of color? Text color? Background color? Border colors? For the whole table or just some cells? I suggest you try to modify the table color in dev tools manually; then tell us which properties of which element(s) (table, tr, th, and/or td, probably) you had to modify.

Second, where is the value to be used in the color? Is it part of the page originally? Is it constant per URL? Or perhaps it's constant for a limited set of values like id or class names? Do you want to enter it into a field on the page?

Part of what I'm doing here is breaking the problem into a series of steps. Each step can be broken down into smaller steps. One good way to develop a program is to write each of these steps and sub-steps as comments, until you have the problem broken down enough that you can figure out the code necessary to do each and every step.

My apologies in the late reply, I haven't had the chance to get to the coding. I've taken a look and it appears to be td element. Background color of a limited constant. Creating a new table on the page may be easier for my skill level, which after assessing everything it would pull values and adjust colors based on those values as well as integrating the option to press a button to search or open another table which shows those values compiled.

 

[jhona48]

By using document.getElementBiId("your id").style.color = "your color";