Как использовать переменную JavaScript в макете таблицы? - PullRequest
Новая
       9

Как использовать переменную JavaScript в макете таблицы?

1 голос
/ 27 марта 2012

Это мой код: 

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

Мне нужно заменить эти 100 и 80 долларов на переменную JavaScript data1 & data2

Как это сделать?

Ответы [ 3 ]

8 голосов
/ 27 марта 2012

Если вы назначите id s для нужных ячеек 

<td id="data1">$100</td> 

<td id="data2">$80</td>

Вы можете установить их значение в Javascript, как это 

document.getElementById("data1").innerHTML = data1;
document.getElementById("data2").innerHTML = data2;

Вы можете увидеть это в действии на jsFiddle.

1 голос
/ 27 марта 2012

Если Я правильно вас понял, и вы хотите заменить значение от 100$ до 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

0 голосов
/ 27 марта 2012 
<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 не имеет явных параметров привязки данных, но имеет теги данных для вставки метаданных в элементы DOM. Подробнее

Если вам все еще нужен более гибкий способ привязки ваших данных, вы можете попробовать этот пост

...