Javascript and setup sheets.

smackayPFSC4 · ‎08-07-2024

I've got a problem I've been trying to work through concerning setup sheets and javascript.
On the summary page, I'd like to change the foreground, and background color of a table cell based on the contents of the cell. In this case, it's the toolpath description. I want the background red, and the font white. If the description is empty(which isn't really EMPTY in the HTML file, it contains  , but i digress....), I'd like it to be white background with black font. But it seems passing variables from javascript to HTML isn't really all that easy, maybe I am missing something.

Here's a snippit of the code I am using.

<script>
				var MyDescription = "${Description}";
				var MyBGColor = "#ffffff";
				var MyFGColor = "#000000";
				if (MyDescription == "&nbsp;") {
					MyBGColor = "#ffffff";
					MyFGColor = "color:#000000";
				}else {
					MyBGColor = "#fc0303";
					MyFGColor = "color:#ffffff";
				}
			</script>			

			<tr>
				<th colspan="1" rowspan="8">NOTES:</th>
				<td id="TPNotes" style="{$MyFGColor.value}" bgcolor={MyBGColor.value} colspan="5" rowspan="8">{Description}</td>

iamcdn79 · ‎08-08-2024

Does this work?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setup Sheet</title>
    <style>
        .red-bg { background-color: #fc0303; color: #ffffff; }
        .white-bg { background-color: #ffffff; color: #000000; }
    </style>
</head>
<body>
    <script>
        var MyDescription = "${Description}";
        var MyClass = "white-bg";
        if (MyDescription.trim() !== " ") {
            MyClass = "red-bg";
        }
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("TPNotes").className = MyClass;
        });
    </script>

    <table>
        <tr>
            <th colspan="1" rowspan="8">NOTES:</th>
            <td id="TPNotes" colspan="5" rowspan="8">${Description}</td>
        </tr>
    </table>
</body>
</html>

Intel Core i9 13900KF CPU
128 GB Kingston Beast DDR4 SDRAM
PNY RTX A2000 6GB Video Card
WD 1 TB SSD Hard Drive
Windows 11 Pro

smackayPFSC4 · ‎08-08-2024

1st of all, thank you for the help, but unfortunately it just comes up with white background with black text whether the cell contains text or not.

Here's my entire table that I'm wanting to display. Maybe I am doing something else wrong?

  <!-- Toolpath summary table follows. -->
  
	<table>
		<tr>
			<td colspan="8" class="title">Summary sheet ${SU_SheetNo} of ${SU_MaxSheets}</td>
		</tr>
		<tr>
			<th colspan="5">Toolpath / TAP File</th>
			<th>Strategy</th>
			<th colspan="2">Tool</th>
		</tr>
		<summaryrow>
			<tr>
				<td colspan="5" rowspan="2">${stoolpath.NameTag}  ${stoolpath.TapFile}</td>
				<td rowspan="2">${toolpath.Strategy}</td>
				<th rowspan="1">Name</th><td rowspan="1">${stoolpath.NCToolName}</td>
			</tr>
			<tr>
				<th>Holder</th><td>${tool.holder_name}</td>
			</tr>
			<tr>
				<th colspan="1" rowspan="8">NOTES:</th>
				<td id="TPNotes" colspan="5" rowspan="8">${Description}</td>
			</tr>

			
			
			
			<tr>
				<th>Type</th><td>${tool.Type}</td>
			</tr>
			<tr>
				<th>Diameter</th><td>${tool.Diameter}</td>
			</tr>
			<tr>
				<th>Tip radius</th><td>${tool.TipRadius}</td>
			</tr>
			<tr>
				<th>Length</th><td>${tool.Length}</td>
			</tr>
			<tr>
				<th>Overhang</th><td>${Overhang}</td>
			</tr>
			<tr>
				<th>Gage Length</th><td>${tool.gauge_length}</td>
			</tr>
			<tr>
				<th>Number</th><td>${tool.Number}</td>
			</tr>
		</summaryrow>
	</table>

icse · ‎08-08-2024

cant you just do a script like this?

<body>
  <div class="a4page">
  <!-- Toolpath summary table follows. -->
  
	<table>
		<tr>
			<td colspan="8" class="title">Summary sheet ${SU_SheetNo} of ${SU_MaxSheets}</td>
		</tr>
		<tr>
			<th colspan="5">Toolpath / TAP File</th>
			<th>Strategy</th>
			<th colspan="2">Tool</th>
		</tr>
		<summaryrow>
			<tr>
				<td colspan="5" rowspan="2">${stoolpath.NameTag}  ${stoolpath.TapFile}</td>
				<td rowspan="2">${toolpath.Strategy}</td>
				<th rowspan="1">Name</th><td rowspan="1">${stoolpath.NCToolName}</td>
			</tr>
			<tr>
				<th>Holder</th><td>${tool.holder_name}</td>
			</tr>
			<tr>
				<th colspan="1" rowspan="8">NOTES:</th>
				<td id="TPNotes" colspan="5" rowspan="8">${Description}</td>

			</tr>

			
			
			
			<tr>
				<th>Type</th><td>${tool.Type}</td>
			</tr>
			<tr>
				<th>Diameter</th><td>${tool.Diameter}</td>
			</tr>
			<tr>
				<th>Tip radius</th><td>${tool.TipRadius}</td>
			</tr>
			<tr>
				<th>Length</th><td>${tool.Length}</td>
			</tr>
			<tr>
				<th>Overhang</th><td>${Overhang}</td>
			</tr>
			<tr>
				<th>Gage Length</th><td>${tool.gauge_length}</td>
			</tr>
			<tr>
				<th>Number</th><td>${tool.Number}</td>
			</tr>
		</summaryrow>
		
		<script>
			
			var element = document.getElementById("TPNotes");
			
			if (element.innerHTML.trim() === '&nbsp;') {
				element.style.backgroundColor = "Red";
				element.style.color = "black";
			}
		</script>
	</table>
	
  </div>
</body>

also you could check this, should do the same:

if (element.innerText.trim() === String.fromCharCode(160)) {

do you whant it to look like this?

smackayPFSC4 · ‎08-12-2024

Thank you for the reply. but. unfortunately, your solution will only do the 1st instance if the ${Description} contains text. But, only after I changed the script slightly to this...

			var element = document.getElementById("TPNotes");
			
			if (element.innerHTML.trim() === '&nbsp;') {
				element.style.backgroundColor = "White";
				element.style.color = "black";
			}else{
				element.style.backgroundColor = "Red";
				element.style.color = "black";
			
			}

SLevra8AUTD · ‎11-05-2024

I am trying to do something similar, except I am just trying to change the color of the font depending on what the output is. I tried this same method and it also only works for the first instance. Just wondering if anyone knew of a method that would work for the whole <summaryrow>?