求和计算不适用于手动输入的值jquery

Question

我根据指定日期计算week count，Non week count和Row Total。

js fiddle demo here

我的HTML代码：

<table class="table table-striped " id="view_job_tbl" border="1">
  <thead>
    <tr>
      <th>Type</th>
      <!-- <th width="10%">Qty</th> -->
      <th>Date Start</th>
      <th>Date Off</th>
      <th>Week</th>
      <th>Non. Week</th>
      <th>Row Total</th>

    </tr>
  </thead>
  <tbody class="BundleDiv">

    <tr class="ParentBundle11 ViewJobrow">
      <td>
        <p class="mar"> Roller
        </p>
      </td>
      <td>
        <input type="text" value="18/07/2017" name="est_start_date[]" placeholder="Date Start" class="StartDate form-control date">
      </td>
      <td>
        <input type="text" name="est_off_date[]" value="20/07/2017" placeholder="Date Off" class="OffDate form-control date">
      </td>
      <td>
        <input type="text" value="3" placeholder="" name="week_count[]" class="WeekDayCount11 form-control wdCount">
      </td>
      <td>
        <input type="text" value="0" placeholder="" name="nonweek_count[]" class="WeekEndCount11 form-control weCount">
      </td>
      <td>
        <input type="text" value="360.00" name="row_total[]" readonly="" id="RowTotal11" class="RowTotal form-control">
      </td>

    </tr>
    <tr class="ChildBundle11" style="background: rgb(249, 249, 249) !important;">
      <td colspan="9" style="padding: 0!important;">
        <table cellpadding="5" border="0" class="ChildTable11  child_tbl table" width="100%" style="background: #f9f9f9!important;">
          <thead>
            <tr>
              <th></th>
              <!-- <th width="10%">Qty</th> -->
              <th width="20%">Asset ID</th>
              <th width="25%"></th>
              <th>Rate 1</th>
              <th>Rate 2</th>
              <th></th>

            </tr>
          </thead>
          <tbody>
            <tr>
              <td></td>
              <td>
                <select style="width:100%" name="assigned_asset[]" class="form-control select2_demo_2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                  <option value="">--Not Assigned --</option>
                  <option value="RL01">RL01</option>
                  <option value="RL02" selected="">RL02</option>
                  <option value="RL03">RL03</option>
                  <option value="RL04">RL04</option>
                  <option value="RL05">RL05</option>
                </select>

              </td>
              <td></td>
              <td>
                <input type="text" name="week_rate[]" value="120.00" placeholder="" class="Week form-control">
              </td>
              <td>
                <input type="text" name="nonweek_rate[]" value="250.00" placeholder="" class="NonWeek form-control">
              </td>
              <td>
                <input type="text" value="360.00" name="rate[]" readonly="" placeholder="" id="ChildRowTotal11" class="ChildRowTotal form-control">
              </td>

            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

和jquery代码：

$(function() {

  $('input.date').datepicker({
    dateFormat: 'dd/mm/yy',
    autoclose: true
  });

});
var calcObject = {

  run: function() {

    var sum = bundleSum = 0;
    $("table").each(function() {
      $(this).find(".StartDate").each(function() {

        var EstStartDate = rowStartID = CustomId = EstOffDate = d1 = d2 = number = nonweekCount = weekdayCount = cat_id = cat_type = weekcount = nonweekcount = className = weekendCount = wendCount = wdayCount = '';
        var wkdAm = wkdAm = wkeAm = wkePm = weekdayTotal = weekendTotal = customRowT = rowT = FinalRowTotal = 0;

        EstStartDate = this.value;

        d1 = EstStartDate.split("/").reverse().join("-");

        EstOffDate = $(this).closest('tr').find("td:eq(2) input[type='text']").val();


        d2 = EstOffDate.split("/").reverse().join("-");

        if (d1 != '' && d2 != '') {
          weekendCount = countWeekendDays(d1, d2);
          weekdayCount = workingDaysBetweenDates(d1, d2);
        }


        weekcount = $(this).closest('tr').find("td:eq(3) input[type='text']").attr('class').split(' ')[0];

        $('.' + weekcount).val(weekdayCount);

        nonweekcount = $(this).closest('tr').find("td:eq(4) input[type='text']").attr('class').split(' ')[0];


        $('.' + nonweekcount).val(weekendCount);


        wdayCount = $(this).closest('tr').find("td:eq(3) input[type='text']").val();
        wendCount = $(this).closest('tr').find("td:eq(4) input[type='text']").val();

        className = $(this).closest('tr').attr('class');
        number = parseFloat(className.match(/-*[0-9]+/));


        $('.ChildTable' + number + ' tbody tr').each(function() {

          wkdAm = $(this).closest('tr').find("td:eq(2) .Week").val();
          wkdPm = $(this).closest('tr').find("td:eq(3) .NonWeek").val();
          customRowT = parseFloat(wkdAm) + parseFloat(wkdPm);
          weekdayTotal = wdayCount * wkdAm;
          weekendTotal = wendCount * wkdPm;
          rowT = weekdayTotal + weekendTotal;
          CustomId = $(this).closest('tr').find("td:eq(4) .ChildRowTotal").attr('id');
          $('#' + CustomId).val(parseFloat(rowT).toFixed(2));
          FinalRowTotal += rowT;
        });
        var id = $(this).closest('tr').find("td:eq(5) input[type='text']").attr('id');
        $('#' + id).val(parseFloat(FinalRowTotal).toFixed(2));


      });
    });

  }

};

$(function() {

  $(document).on('change', '.StartDate', function() {

    calcObject.run();

  });
  $(document).on('change', '.OffDate', function() {

    calcObject.run();

  });

  $(document).on('change', '.RowTotal', function() {

    calcObject.run();

  });

  $(document).on('keyup', '.Week', function() {

    calcObject.run();

  });

  $(document).on('keyup', '.NonWeek', function() {
    calcObject.run();
  });
  $(document).on('keyup', '.weCount', function() {

    calcObject.run();

  });

  $(document).on('keyup', '.wdCount', function() {
    calcObject.run();
  });

  $(document).on('change', '.ChildRowTotal', function() {
    calcObject.run();
  });

});



function workingDaysBetweenDates(d0, d1) {

  if (d0 != '') {
    var startDate = parseDate(d0);
  }
  if (d1 != '') {
    var endDate = parseDate(d1);
  }
  // Validate input
  if (endDate < startDate) {
    return 0;
  }
  // Calculate days between dates
  var millisecondsPerDay = 86400 * 1000; // Day in milliseconds
  startDate.setHours(0, 0, 0, 1); // Start just after midnight
  endDate.setHours(23, 59, 59, 999); // End just before midnight
  var diff = endDate - startDate; // Milliseconds between datetime objects    
  var days = Math.ceil(diff / millisecondsPerDay);

  // Subtract two weekend days for every week in between
  var weeks = Math.floor(days / 7);
  days -= weeks * 2;

  // Handle special cases
  var startDay = startDate.getDay();
  var endDay = endDate.getDay();

  // Remove weekend not previously removed.   
  if (startDay - endDay > 1) {
    days -= 2;
  }
  // Remove start day if span starts on Sunday but ends before Saturday
  if (startDay == 0 && endDay != 6) {
    days--;
  }
  // Remove end day if span ends on Saturday but starts after Sunday
  if (endDay == 6 && startDay != 0) {
    days--;
  }

  return days;
}

function countWeekendDays(d0, d1) {
  if (d0 != '') {
    var startDate = parseDate(d0);
  }
  if (d1 != '') {
    var endDate = parseDate(d1);
  }
  var ndays = 1 + Math.round((endDate.getTime() - startDate.getTime()) / (24 * 3600 * 1000));
  var nsaturdays = Math.floor((startDate.getDay() + ndays) / 7);
  return 2 * nsaturdays + (startDate.getDay() == 0) - (endDate.getDay() == 6);
}

function parseDate(input) {

  var parts = input.match(/(\d+)/g);
  if (parts != '') {
    return new Date(parts[0], parts[1] - 1, parts[2]);
  }

}

因此，在更改日期字段时，我的计算工作正常。但是，如果我输入input[name] = week_count[]和input[name]=nonweek_count[]的手动值，它甚至不会取值并且计算不起作用。

有人可以帮忙解决这个问题吗？

Answer 1

您可以使用解决方案http://jsfiddle.net/fyhsz9ra/1371/

＆＃13;

＆＃13;

$(function() {

  $('input.date').datepicker({
    dateFormat: 'dd/mm/yy',
    autoclose: true
  });

});
var calcObject = {

  run: function(flag) {

    var sum = bundleSum = 0;
    $("table").each(function() {
      $(this).find(".StartDate").each(function() {

        var EstStartDate = rowStartID = CustomId = EstOffDate = d1 = d2 = number = nonweekCount = weekdayCount = cat_id = cat_type = weekcount = nonweekcount = className = weekendCount = wendCount = wdayCount = '';
        var wkdAm = wkdAm = wkeAm = wkePm = weekdayTotal = weekendTotal = customRowT = rowT = FinalRowTotal = 0;

        EstStartDate = this.value;

        d1 = EstStartDate.split("/").reverse().join("-");

        EstOffDate = $(this).closest('tr').find("td:eq(2) input[type='text']").val();


        d2 = EstOffDate.split("/").reverse().join("-");

        if (d1 != '' && d2 != '') {
          weekendCount = countWeekendDays(d1, d2);
          weekdayCount = workingDaysBetweenDates(d1, d2);
        }


        weekcount = $(this).closest('tr').find("td:eq(3) input[type='text']").attr('class').split(' ')[0];
	      if(flag === '0')
	       	$('.' + weekcount).val(weekdayCount);

        nonweekcount = $(this).closest('tr').find("td:eq(4) input[type='text']").attr('class').split(' ')[0];

				if( flag === '0')
           $('.' + nonweekcount).val(weekendCount);


        wdayCount = $(this).closest('tr').find("td:eq(3) input[type='text']").val();
        wendCount = $(this).closest('tr').find("td:eq(4) input[type='text']").val();

        className = $(this).closest('tr').attr('class');
        number = parseFloat(className.match(/-*[0-9]+/));


        $('.ChildTable' + number + ' tbody tr').each(function() {

          wkdAm = $(this).closest('tr').find("td:eq(1) .Week").val();
          wkdPm = $(this).closest('tr').find("td:eq(2) .NonWeek").val();
          customRowT = parseFloat(wkdAm) + parseFloat(wkdPm);
          weekdayTotal = wdayCount * wkdAm;
          weekendTotal = wendCount * wkdPm;
          rowT = weekdayTotal + weekendTotal;
          CustomId = $(this).closest('tr').find("td:eq(3) .ChildRowTotal").attr('id');
          $('#' + CustomId).val(parseFloat(rowT).toFixed(2));
          FinalRowTotal += rowT;
        });
        var id = $(this).closest('tr').find("td:eq(5) input[type='text']").attr('id');
        $('#' + id).val(parseFloat(FinalRowTotal).toFixed(2));


      });
    });

  }

};

$(function() {

  $(document).on('change', '.StartDate', function() {

    calcObject.run('0');

  });
  $(document).on('change', '.OffDate', function() {

    calcObject.run('0');

  });

  $(document).on('change', '.RowTotal', function() {

    calcObject.run('0');

  });

  $(document).on('keyup', '.Week', function() {
		calcObject.run('0');

  });

  $(document).on('keyup', '.NonWeek', function() {
    calcObject.run('0');
  });
  $(document).on('keyup', '.weCount', function() {
    calcObject.run('1');

  });

  $(document).on('keyup', '.wdCount', function() {
    calcObject.run('1');
  });

  $(document).on('change', '.ChildRowTotal', function() {
    calcObject.run('0');
  });

});



function workingDaysBetweenDates(d0, d1) {

  if (d0 != '') {
    var startDate = parseDate(d0);
  }
  if (d1 != '') {
    var endDate = parseDate(d1);
  }
  // Validate input
  if (endDate < startDate) {
    return 0;
  }
  // Calculate days between dates
  var millisecondsPerDay = 86400 * 1000; // Day in milliseconds
  startDate.setHours(0, 0, 0, 1); // Start just after midnight
  endDate.setHours(23, 59, 59, 999); // End just before midnight
  var diff = endDate - startDate; // Milliseconds between datetime objects    
  var days = Math.ceil(diff / millisecondsPerDay);

  // Subtract two weekend days for every week in between
  var weeks = Math.floor(days / 7);
  days -= weeks * 2;

  // Handle special cases
  var startDay = startDate.getDay();
  var endDay = endDate.getDay();

  // Remove weekend not previously removed.   
  if (startDay - endDay > 1) {
    days -= 2;
  }
  // Remove start day if span starts on Sunday but ends before Saturday
  if (startDay == 0 && endDay != 6) {
    days--;
  }
  // Remove end day if span ends on Saturday but starts after Sunday
  if (endDay == 6 && startDay != 0) {
    days--;
  }

  return days;
}

function countWeekendDays(d0, d1) {
  if (d0 != '') {
    var startDate = parseDate(d0);
  }
  if (d1 != '') {
    var endDate = parseDate(d1);
  }
  var ndays = 1 + Math.round((endDate.getTime() - startDate.getTime()) / (24 * 3600 * 1000));
  var nsaturdays = Math.floor((startDate.getDay() + ndays) / 7);
  return 2 * nsaturdays + (startDate.getDay() == 0) - (endDate.getDay() == 6);
}

function parseDate(input) {

  var parts = input.match(/(\d+)/g);
  if (parts != '') {
    return new Date(parts[0], parts[1] - 1, parts[2]);
  }

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/>

<table class="table table-striped " id="view_job_tbl" border="1">
  <thead>
    <tr>
      <th>Type</th>
      <!-- <th width="10%">Qty</th> -->
      <th>Date Start</th>
      <th>Date Off</th>
      <th>Week</th>
      <th>Non. Week</th>
      <th>Row Total</th>

    </tr>
  </thead>
  <tbody class="BundleDiv">

    <tr class="ParentBundle11 ViewJobrow">
      <td>
        <p class="mar"> Roller
        </p>
      </td>
      <td>
        <input type="text" value="18/07/2017" name="est_start_date[]" placeholder="Date Start" class="StartDate form-control date">
      </td>
      <td>
        <input type="text" name="est_off_date[]" value="20/07/2017" placeholder="Date Off" class="OffDate form-control date">
      </td>
      <td>
        <input type="text" value="3" placeholder="" name="week_count[]" class="WeekDayCount11 form-control wdCount">
      </td>
      <td>
        <input type="text" value="0" placeholder="" name="nonweek_count[]" class="WeekEndCount11 form-control weCount">
      </td>
      <td>
        <input type="text" value="360.00" name="row_total[]" readonly="" id="RowTotal11" class="RowTotal form-control">
      </td>

    </tr>
    <tr class="ChildBundle11" style="background: rgb(249, 249, 249) !important;">
      <td colspan="9" style="padding: 0!important;">
        <table cellpadding="5" border="0" class="ChildTable11  child_tbl table" width="100%" style="background: #f9f9f9!important;">
          <thead>
            <tr>
              <th></th>
              <th>
                ASSET ID
              </th>
              <th colspan="2">RATES</th>
              <th>
              </th>
              <th>
              </th>
              <th>
              </th>
              <th>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>

              <td>
                <select style="width:100%" name="assigned_asset[]" class="form-control select2_demo_2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                  <option value="">--Not Assigned --</option>
                  <option value="RL01">RL01</option>
                  <option value="RL02" selected="">RL02</option>
                  <option value="RL03">RL03</option>
                  <option value="RL04">RL04</option>
                  <option value="RL05">RL05</option>
                </select>

              </td>
              <td>
                <input type="text" name="week_rate[]" value="120.00" placeholder="" class="Week form-control">
              </td>
              <td>
                <input type="text" name="nonweek_rate[]" value="250.00" placeholder="" class="NonWeek form-control">
              </td>
              <td>
                <input type="text" value="360.00" name="rate[]" readonly="" placeholder="" id="ChildRowTotal11" class="ChildRowTotal form-control">
              </td>

            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;