I have a website table that shows a variety of data, which currently changes which data are viewed based on a variable string passed in the URL. This example looks as follows:
www.acoolwebsite.com/?variable=var1
I've provided a synthesized view of the table's current header structure, which is as follows:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Static1</th>
<th>Static2</th>
<th>Static3</th>
<th>Variable1</th>
<th>Variable2</th>
<th>Variable3</th>
</tr>
</table>
</body>
</html>I am looking to change the headers Variable1, Variable2, & Variable3 to another set of headers, say Change1, Change2, & Change3 if the passed variable in the URL www.acoolwebsite.com/?variable=var1 matches a certain string.
Using JavaScript, I've been able to partition the variable passed in the URL, but am uncertain how to isolate and alter header names. What additional steps can I take to produce this outcome? Thanks!
You should assign an ID for your table headers and use innerHTML. See sample snippet below:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Static1</th>
<th>Static2</th>
<th>Static3</th>
<th id="v1">Variable1</th>
<th id="v2">Variable2</th>
<th id="v3">Variable3</th>
</tr>
</table>
<input type="button" value="Click" onclick="changeHeaders()" />
<script>
function changeHeaders() {
// You variables
let v1 = 'change1';
let v2 = 'change2';
let v3 = 'change3';
document.getElementById("v1").innerHTML = v1;
document.getElementById("v2").innerHTML = v2;
document.getElementById("v3").innerHTML = v2;
}
</script>
</body>
</html>