Question

我在Symfony2中有一个方法，可以显示两个时间字段的总小时数。

现在我希望在数据库更新时自动计算模板

  <table>
     <tr>
       <th>Total Hours</th>
       <th>Name</th>
     </tr>

     <tr>
         <td>Pedro<td>
        <td class="hours">2:00</td>//total hours from getHoursWorked() method
     </tr>

     <tr>
         <td>alan<td>
        <td class="hours">1:43</td>//total hours from getHoursWorked() method
     </tr>

     <p> Total hours is<button id="addTimes"></button>: </p>

     <span id="timesum"></span>

我想要一个像这样的输出

pedro   2:00
alan     1:43

Total hours is:
   03:43

脚本

<script>
    Number.prototype.padDigit = function () {
        return (this < 10) ? '0' + this : this;
    }

    $("#addTimes").on('click', function () {
        var t1 = "00:00";
        var mins = 0;
        var hrs = 0;
        $('.hours').each(function () {
            t1 = t1.split(':');
            var t2 = $(this).val().split(':');
            mins = Number(t1[1]) + Number(t2[1]);
            minhrs = Math.floor(parseInt(mins / 60));
            hrs = Number(t1[0]) + Number(t2[0]) + minhrs;
            mins = mins % 60;
            t1 = hrs.padDigit() + ':' + mins.padDigit()
        });
        $('#timeSum').text(t1);
    });
</script>

输出

pedro   2:00
alan     1:43

Total hours is:

  NaN:NaN

你会怎么做？

Answer 1

您使用.val()获取td的值。您需要使用.text()的位置，因为val()是从表单元素中获取值。

＆＃13;

Number.prototype.padDigit = function() {
  return (this < 10) ? '0' + this : this;
}

$("#addTimes").on('click', function() {
  var t1 = "00:00";
  var mins = 0;
  var hrs = 0;
  $('.hours').each(function() {
    t1 = t1.split(':');
    var t2 = $(this).text().split(':');
    mins = Number(t1[1]) + Number(t2[1]);
    minhrs = Math.floor(parseInt(mins / 60));
    hrs = Number(t1[0]) + Number(t2[0]) + minhrs;
    mins = mins % 60;
    t1 = hrs.padDigit() + ':' + mins.padDigit()
  console.log(t1);
  });
  $('#timesum').text(t1);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Total Hours</th>
    <th>Name</th>
  </tr>

  <tr>
    <td>Pedro
      <td>
        <td class="hours">2:00</td>
  </tr>

  <tr>
    <td>alan
      <td>
        <td class="hours">1:43</td>
  </tr>
  <tr>
    <td>Total hours is:</td>
    <td>
      <span id="timesum"></span>
    </td> 
  </tr>
  <p>
    <button id="addTimes">Add</button>:</p>

＆＃13;

Answer 2

尝试使用下面的脚本

<script>
    Number.prototype.padDigit = function () {
        return (this < 10) ? '0' + this : this;
    }
    $("#addTimes").on('click', function () {
        var t1 = "00:00";
        var mins = 0;
        var hrs = 0;
        $('.hours').each(function () {
            t1 = t1.split(':');
            var t2 = $(this).text().split(':');
            mins = Number(t1[1]) + Number(t2[1]);
            minhrs = Math.floor(parseInt(mins / 60));
            hrs = Number(t1[0]) + Number(t2[0]) + minhrs;
            mins = mins % 60;
            t1 = hrs.padDigit() + ':' + mins.padDigit()
        });
        $('#timeSum').text(t1);
    });
</script>

获取表格中的总时间

2 个答案: