How to use a JavaScript variable in a table layout?

Question

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?

What do you mean by replace? switch between 100$ and 80$ ? — gdoron
– gdoron, Commented Mar 27, 2012 at 13:07

Peter Olson · Accepted Answer · 2012-03-27 13:07:25Z

9

If 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.

answered Mar 27, 2012 at 13:07

Peter Olson

144k49 gold badges209 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gdoron · Accepted Answer · 2012-03-27 13:07:05Z

1

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

answered Mar 27, 2012 at 13:07

gdoron

151k59 gold badges302 silver badges376 bronze badges

Comments

David Diez · Accepted Answer · 2012-03-27 13:14:16Z

0

<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

answered Mar 27, 2012 at 13:14

David Diez

1,2231 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to use a JavaScript variable in a table layout?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related