如何從HTML表格中調用JavaScript函數

Question

我是Java和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>

小提琴。

但是，如果要使用{{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>

小提琴。 （ 編輯：錯誤的鏈接。已修復。）

Answer 2

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

Answer 3

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

在這種情況下，您可以將變量放在范圍中，然后使用jquery獲取該值，然后我根據需要對其進行格式化，然后使用.html將其放在td中