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

How to call a javascript function from a table in HTML

本文关键字：调用 javascript 函数 HTML      更新时间：2024-04-11

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

<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。（编辑：错误链接。已修复。）

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

<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得到这个值，然后我按照你想要的格式格式化，然后我用.html 把这个值放在td中

相关文章：