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

时间:2013-12-07 09:51:50

标签: javascript jquery html

我是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函数并相应地显示日期。

3 个答案:

答案 0 :(得分:2)

<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中插入值,则可以使用Handlebars之类的JavaScript模板库。

以下是一个例子:

<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.编辑:错误的链接。已修复。)

答案 1 :(得分:0)

<tr>
  <th>Date of Birth: </th>
  <td class="tdDOB">{{dob}}</td>
</tr>   

这将有效

var dob = new Date($('td.tdDOB').val());
var dobArr = dob.toDateString().split(' ');
var dobFormat = dobArr[2] + ' ' + dobArr[1] + ' ' + dobArr[3];
$('td.tdDOB').val(dobFormat);

答案 2 :(得分:0)

<span class="getdate" style="display:none;">2012-03-12</span>
<table>
  <tr>
    <th>Date of Birth: </th>
    <td class="dateofbirth"></td>
 </tr> 
</table>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script type="text/javascript">
 $("document").ready(function(){
  var dob = $('.getdate:hidden').text();
  var dateString = moment(dob).format('DD MMMM YYYY');
  $('.dateofbirth').html(dateString);
 }) 
 </script>

你必须将你的变量放在任何div或span中,然后使用javascript中的描述获取该值,然后使用moment.js进行格式化,然后使用jquery将该变量放入所需的td。

在这种情况下,您可以将您的变量放在span中,然后使用jquery获取该值,然后我按照您的要求格式化,然后我将该值放在td中.html