This is my code:
<html>
<script type="text/javascript">
var data1 = "$100";
var data2 = "$80";
</script>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
I need to replace this $100 & $80 with JavaScript variable data1 & data2
How to do that?
This is my code:
<html>
<script type="text/javascript">
var data1 = "$100";
var data2 = "$80";
</script>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
I need to replace this $100 & $80 with JavaScript variable data1 & data2
How to do that?
Share Improve this question edited Feb 27, 2018 at 18:35 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Mar 27, 2012 at 13:03 coderslaycoderslay 14.4k32 gold badges81 silver badges122 bronze badges 2-
What do you mean by replace? switch between
100$and80$? – gdoron Commented Mar 27, 2012 at 13:07 - No just make use of variables :) – coderslay Commented Mar 27, 2012 at 13:18
3 Answers
Reset to default 9If you assign ids to the cells you want
<td id="data1">$100</td>
<td id="data2">$80</td>
You can set their value in Javascript like this
document.getElementById("data1").innerHTML = data1;
document.getElementById("data2").innerHTML = data2;
You can see this in action on jsFiddle.
If I understood you right, and you want to replace between 100$ and 80$:
var data1 = "$100";
var data2 = "$80";
var elements = document.getElementsByTagName('td');
for (var i = 0; i < elements.length; i++) {
console.log(elements[i]);
if (elements[i].innerHTML == data1)
elements[i].innerHTML = data2;
else if (elements[i].innerHTML == data2)
elements[i].innerHTML = data1;
}
LIVE DEMO
<html>
<script type="text/javascript">
var data1 = "$100";
var data2 = "$80";
</script>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td onload="this.textContent=data1;"></td>
</tr>
<tr>
<td>February</td>
<td onload="this.textContent=data2;"></td>
</tr>
</table>
</body>
</html>
HTML5 has no explicit databinding options, but has data- tags to insert metadata to DOM elements. More info
If you still need a more responsive way to bind your data you can try this post