Changing TextContent Color In Table At Run Time - Physics Forums

• Insights Blog -- Browse All Articles -- Physics Articles Math Articles Education Articles Bio/Chem/Tech Articles
• Forums Chemistry Biology and Medical Earth Sciences Computer Science Computing and Technology DIY Projects
• Trending

Log in Register What's new

• Chemistry
• Biology and Medical
• Earth Sciences
• Computer Science
• Computing and Technology
• DIY Projects

Menu Log in Register Navigation More options Style variation System Light Dark Contact us Close Menu You are using an out of date browser. It may not display this or other websites correctly.You should upgrade or use an alternative browser.

• Forums
• Other Sciences
• Programming and Computer Science

JavaScriptChanging textContent color in table at run time

• Thread starter Thread starter aheight
• Start date Start date Sep 15, 2016
• Tags Tags Color Table Time

Click For Summary SUMMARY

The forum discussion focuses on dynamically changing the text color of checkbox labels in an HTML table based on color data loaded from a JSON file. The user initially attempts to use the textContent property to set the color, which does not work, and later discovers that the correct approach is to use the style.color property with a properly formatted hex code, such as #a52a2a. The discussion also highlights the use of the Color.js library for color manipulation and suggests using CSS for better maintainability.

PREREQUISITES

• Basic understanding of HTML and CSS
• Familiarity with JavaScript DOM manipulation
• Knowledge of JSON data structure
• Experience with color formats (RGB, hex codes)

NEXT STEPS

• Learn how to implement dynamic styling with CSS and JavaScript
• Explore the Color.js library for advanced color manipulation
• Research best practices for loading and handling large JSON files in web applications
• Investigate the use of CSS variables for dynamic theming

USEFUL FOR

Web developers, particularly those working with dynamic content and user interfaces, as well as anyone interested in enhancing the visual representation of data in web applications.

aheight Messages 318 Reaction score 108 Hi, I was wondering if someone could help me change the color of table check box labels when my HTML file is loaded. At run time, I load a JSON file with color data for each branch of a function I'm plotting via WebGL and display a table of check boxes one for each function branch (there can be many). I then give the reader the option of choosing which branches and rings of the function to display. I would like to color-code the check box text to the same color as the branch plot to make it easier for the reader to see which branch in the plot corresponds to which check box. In the <table> row below, I have for example, Branch 1 with id="testthis" and a label of "Branch 1". Suppose in my JSON file, I have the color of Branch 1 given by: var branch1color=[165, 42,42]; which is brown. Ideally, I would like to switch out the "Branch 1" text to brown text via: <font color="0xa52a2a">Branch 1</font> but when I try for example to use: var mycolor=branch1color[[0]]*Math.pow(16,4)+myvalue[[1]]*Math.pow(16,2)+myvalue[[2]]; document.getElementById("testthis").textContent=mycolor.toString(16); or some variation of that, I cannot get it to work. Could someone help me with this please? Thanks HTML: <tr> <td class="branch1" id="testthis"> Branch 1 <input type="checkbox" id="ring1branch1" checked="checked" name="branch1"/> <td class="branch2"> Branch 2<input type="checkbox" id="ring1branch2" checked="checked" name="branch2" /> <td class="branch3"> Branch 3<input type="checkbox" id="ring1branch3" checked="checked" name="branch3" /> </tr> Last edited: Sep 15, 2016 Technology news on Phys.org

• Research team improves fuel cell durability with fatigue-resistant membranes
• Self-extinguishing batteries could reduce the risk of deadly and costly battery fires
• Chemists decipher reaction process that could improve lithium-sulfur batteries

Borg Science Advisor Gold Member Messages 2,301 Reaction score 5,044 textContent is used to set the name and not the color. Normally, you would set the style attribute on an element with something like this: document.getElementById("testthis").style.color = "0xa52a2a". aheight Messages 318 Reaction score 108

Borg said: textContent is used to set the name and not the color. Normally, you would set the style attribute on an element with something like this: document.getElementById("testthis").style.color = "0xa52a2a".

Hi. Thanks for replying. Unfortunately, that's not changing the color. It's still black. Borg Science Advisor Gold Member Messages 2,301 Reaction score 5,044 That's the basic standard. Are you setting it exactly as I showed or are you using the other setting - mycolor.toString(16)? Can you make the example on the linked page work? aheight Messages 318 Reaction score 108

Borg said: That's the basic standard. Are you setting it exactly as I showed or are you using the other setting - mycolor.toString(16)? Can you make the example on the linked page work?

Ok thanks for that. If I change it for example like the link, to: document.getElementById("testthis").style.color = "red"; then it's changed to red. But not if I use the hex code. My colors though won't in general be standard colors but rather in the form of rgb(a,b,c) which I can then convert to a 6-digit hex number if I have to. I'll continue working on it to see if I can get a numeric color code to work. Borg Science Advisor Gold Member Messages 2,301 Reaction score 5,044

aheight said: Ok thanks for that. If I change it for example like the link, to: document.getElementById("testthis").style.color = "red"; then it's changed to red. But not if I use the hex code. My colors though won't in general be standard colors but rather in the form of rgb(a,b,c) which I can then convert to a 6-digit hex number if I have to. I'll continue working on it to see if I can get a numeric color code to work.

I suspected that it wasn't the setting but the value that you were using. Try printing out the value to the console.log to see what the mycolor value is. aheight Messages 318 Reaction score 108 Ok, I think I have it: need to specify the hex number as "#a52a2a". That works! Thanks a bunch! Just an update: Once I have my color as a 6-digit hex number in "mycolor", I can then use: document.getElementById("testthis").style.color = "#"+mycolor.toString(16); Last edited: Sep 15, 2016 jack action Science Advisor Insights Author Messages 3,551 Reaction score 9,901 You shouldn't use the 'font' element anymore. Use 'span' instead (You don't need to change your javascript code, it will work the same way): HTML: <span id=testthis style="color:#a52a2a;">Branch 1</span> Better yet, use a css file. The html file would be: HTML: <head> <link rel="stylesheet" type="text/css" href="theme.css"> </head> ... <span id=testthis>Branch 1</span> ... and the theme.css file would be: CSS: #testthis{ color:#a52a2a; } aheight Messages 318 Reaction score 108 Thanks for that Jack. Not sure how I would implement a style-sheet I could edit on the fly with my application? Maybe you can look at how I implement the following which does change all the check box colors to the branch colors and offer a suggestion? I have a JSON file with all the data to render the function in 3D via WebGL including the color codes. For each function, the data in the JSON file is a 4-D array: {ring, branch, [vertex data, index data, color data, normals, barycentric data, pointers]} Once the data is read into a 4D array called "thisData". I access the color code for each branch of each ring by accessing the first color code of each branch via: [thisData[ring][branch][2][0],thisData[ring][branch][2][1],thisData[ring][branch][2][2]]; Not sure this is the best way to change all the labels of the check boxes. Also, just found out I can use the gitHub library color.js to use the function Color([r,g,b]) so downloaded and added a src script to my file for this library. I next then create two for-loops to change all the check box labels as per above (in the case of 2 rings with three branches each) which I've now changed the ID's for all the check boxes to "ringXbranchYtd": JavaScript: thisData=realData; for(var ring=1;ring<3;ring++){ for(var branch=1;branch<4;branch++) { var branchColorValue= [thisData[ring-1][branch-1][2][0]*255,thisData[ring-1][branch-1][2][1]*255,thisData[ring-1][ branch-1][2][2]*255]; branchID="ring"+ring.toString()+"branch"+branch.toString()+"td"; document.getElementById(branchID).style.color = Color(branchColorValue); } }; Last edited: Sep 15, 2016 jack action Science Advisor Insights Author Messages 3,551 Reaction score 9,901 Is it necessary to keep the RGB as 3 separate values? If you only need the color as a whole, you could store it one of these two ways: 1. Assuming color data is of the form "ff8c00": JavaScript: thisData=realData; for(var ring=1;ring<3;ring++){ for(var branch=1;branch<4;branch++){ branchID="ring"+ring.toString()+"branch"+branch.toString()+"td"; document.getElementById(branchID).style.color = "#" + thisData[ring-1][branch-1][2]; } } This way, you can still access the RGB values quite easily with some string manipulations. 2. Assuming color data is of the form "dark orange" (case-insensitive; see list of available color names): JavaScript: thisData=realData; for(var ring=1;ring<3;ring++){ for(var branch=1;branch<4;branch++){ branchID="ring"+ring.toString()+"branch"+branch.toString()+"td"; document.getElementById(branchID).style.color = thisData[ring-1][branch-1][2].replace(/ /g,""); // remove all white spaces } } This way, you can use the color for styling AND text. aheight Messages 318 Reaction score 108 Hi Jack, My color data is stored as separate red, green and blue values. I think I have it looking pretty good. You guys have been great helping me with the code. Unfortunately the data file is 4.5 Mb and takes a while to load on slower machines. Could you take a look at it (below link) and let me know if you can suggest any improvements? Note how all the check box branch colors switch when we switch to the real and imag parts of the function: https://dl.dropboxusercontent.com/s/dhdvgj0astxrah6/index.html?dl=0 Made some good progress since starting the thread here: https://www.physicsforums.com/threads/setting-up-3-d-rotation-in-web-page.881634/ Last edited by a moderator: May 8, 2017 sdaSd Messages 1 Reaction score 0 Are you setting look more example http://welookups.com/js/js_htmldom_css.html Roberto Teso Messages 31 Reaction score 29 Why don't use CSS rgb() directly, saving a bit of code? JavaScript: document.getElementById(branchID).style.color = "rgb(r, g, b)"; Edit reason: I clicked save button by mistake.

Similar threads

JavaScript Need insert of mathcode in Table element

• Sep 22, 2016 · Replies 13 · Sep 22, 2016

Replies 13 Views 2K Java Javascript multiplication tables

• Aug 6, 2014 · Replies 9 · Aug 7, 2014

Replies 9 Views 4K MHB Online Sage Commands at the Sage Cell Server

• Jun 28, 2013 · Replies 3 · Sep 3, 2022

Replies 3 Views 6K Solving Expandable Content Box Issue in Programming Forum

• Jun 13, 2007 · Replies 4 · Jun 26, 2007

Replies 4 Views 2K

• Forums
• Other Sciences
• Programming and Computer Science

Hot Threads

• 

  How to increase phone signal strength by lying about it

  • Started by Borg
  • Nov 3, 2025
  • Replies: 12
  • Programming and Computer Science
• S

  Who is responsible for the software when AI takes over programming?

  • Started by symbolipoint
  • Sep 26, 2025
  • Replies: 38
  • Programming and Computer Science
• 

  A Crisis for Newly Minted CompSci Majors -- entry level jobs gone

  • Started by jedishrfu
  • Aug 12, 2025
  • Replies: 60
  • Programming and Computer Science
• E

  Learning Assembly and computer architecture for x86

  • Started by elias001
  • Sep 2, 2025
  • Replies: 102
  • Programming and Computer Science
• E

  Learning data structures and algorithms in different programming languages

  • Started by elias001
  • Aug 19, 2025
  • Replies: 86
  • Programming and Computer Science

Recent Insights

• 

  Insights Thinking Outside The Box Versus Knowing What’s In The Box

  • Started by Greg Bernhardt
  • Oct 13, 2025
  • Replies: 26
  • Other Physics Topics
• 

  Insights Why Entangled Photon-Polarization Qubits Violate Bell’s Inequality

  • Started by Greg Bernhardt
  • Sep 29, 2025
  • Replies: 28
  • Quantum Interpretations and Foundations
• 

  Insights Quantum Entanglement is a Kinematic Fact, not a Dynamical Effect

  • Started by Greg Bernhardt
  • Sep 2, 2025
  • Replies: 22
  • Quantum Physics
• 

  Insights What Exactly is Dirac’s Delta Function? - Insight

  • Started by Greg Bernhardt
  • Sep 2, 2025
  • Replies: 33
  • General Math
• 

  Insights Relativator (Circular Slide-Rule): Simulated with Desmos - Insight

  • Started by Greg Bernhardt
  • Sep 2, 2025
  • Replies: 1
  • Special and General Relativity
• P

  Insights Fixing Things Which Can Go Wrong With Complex Numbers

  • Started by PAllen
  • Jul 20, 2025
  • Replies: 7
  • General Math

Back Top