javascript - 如何从 HTML 中的表格调用 javascript 函数

Question

我是 Javascript 和 HTML 的新手。现在，我使用 HTML 来显示从 XML 文件中检索到的时间。下面是 HTML 标签。

<tr>
  <th>Date of Birth: </th>
  <td>{{dob}}</td>
</tr>      

这将以 yyyy-mm-dd 格式显示日期。即日期将显示为 2012-03-12 我希望它显示为 2013 年 3 月 12 日。我使用了 moment.min.js 但没有成功。我不知道如何从标签调用 javascript 函数并相应地显示日期。

Answer 1

<table>
  <tr>
    <th>Date of Birth: </th>
    <td id='date-of-birth'></td>
  </tr>
</table> 

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script>
  var dob = '2012-03-12';
  var dateString = moment(dob).format('DD MMMM YYYY');
  var element = document.getElementById('date-of-birth');
  element.innerHTML = dateString;
</script>

Fiddle.

但是，如果您想使用 {{variable}} 括号语法将值插入到您的 HTML 中，您可以使用 JavaScript 模板库，如 Handlebars .

这是一个例子:

<script id="sample-template" type="text/x-handlebars-template">
  <table>
    <tr>
      <th>Date of Birth: </th>
      <td>{{dob}}</td>
    </tr>
  </table>
</script>

<div id="output"></div>

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script>
  var dob = '2012-03-12';
  var dateString = moment(dob).format('DD MMMM YYYY');

  var source = $('#sample-template').html();
  var template = Handlebars.compile(source);
  $('#output').html(template({dob: dateString}));
</script>

Fiddle. (编辑:错误链接。已修复。)