Уменьшить кратное выражение if в функции JavaScript

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<table cellspacing="3" cellpadding="3" id="data_table" width="50%">
  <thead>
    <tr>
      <th width="30%">Due date</th>
      <th width="26%">Amount Due</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="addPurchaseItem">
    <tr>
      <td width="30%">
        <input type="text" tabindex="1" id="Text1" autocomplete="off" class="datectrl" name="due_date[]" placeholder="Due Date" runat="server" />
      </td>
      <td width="25%">
        <input type="text" runat="server" id="new_Amount_1" placeholder="0.00" autocomplete="off" clientidmode="Static" name="new_Amount[]" />
      </td>
      <td>
        <input type="button" onclick="return delete_row(this)" value="Delete" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <input type="button" onclick="add_row('addPurchaseItem');" value="Add Credit Period" id="btnAddCrdPrd" name="addbtnAddCrdPrd" />
      </td>
    </tr>
  </tfoot>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $(".datectrl").datepicker({
      dateFormat: 'dd/mm/yy',
      showOn: 'focus'
    });
  });
</script>

<script type="text/javascript">
  var count = 2;
  var limits = 500;

  function add_row(divName) {

    if (count == limits) {
      alert("You have reached the limit of adding " + count + "inputs ");
    } else {
      var newdiv = document.createElement('tr');
      var tabin = "new_due_" + count;
      tabindex = count * 1,
        tab1 = tabindex + 1;
      tab2 = tabindex + 2;
      newdiv.innerHTML = '<td><input type="text" onchange="dateValidation()" name ="due_date[]" id = "new_due_' + count + '" class="datectrl" autocomplete="off" tabindex = "' + tab1 + '"  placeholder = "Due date" /> </td > <td> <input type="text" id="new_Amount_' + count + '" tabindex="' + tab1 + '" placeholder="0.00" autocomplete="off" name="new_Amount[]" /> </td><td> <input type="button" value="Delete" onclick="delete_row(this)" tabindex="' + tab2 + '"></input></td > ';
      document.getElementById(divName).appendChild(newdiv);
      document.getElementById(tabin).focus();
      count++;
      $(".datectrl").datepicker({
        dateFormat: "dd/mm/yy"
      });
      $(".datectrl").focus();
    }
  }

  function delete_row(no) {
    var i = no.parentNode.parentNode.rowIndex;
    if (i == "1") {
      alert("Can't Delete Row");
      return false;
    } else {
      document.getElementById("data_table").deleteRow(i);
    }
  }
</script>

<script type="text/javascript">
  function dateValidation() {
    $(function() {
      $("[id*=data_table] tbody ").each(function() {

        if (moment($(this).find('tr:eq(1) td:eq(0) input').val(), "DD/MM/YYYY") <= moment($(this).find('tr:eq(0) td:eq(0) input').val(), "DD/MM/YYYY")) {
          alert("Due date should be greater than previous due date");
          $(this).find('tr:eq(1) td:eq(0) input').val('');
          return false;
        }
        if (moment($(this).find('tr:eq(2) td:eq(0) input').val(), "DD/MM/YYYY") <= moment($(this).find('tr:eq(1) td:eq(0) input').val(), "DD/MM/YYYY")) {
          alert("Due date should be greater than previous due date");
          $(this).find('tr:eq(2) td:eq(0) input').val('');
          return false;
        }

        if (moment($(this).find('tr:eq(3) td:eq(0) input').val(), "DD/MM/YYYY") <= moment($(this).find('tr:eq(2) td:eq(0) input').val(), "DD/MM/YYYY")) {
          alert("Due date should be greater than previous due date");
          $(this).find('tr:eq(3) td:eq(0) input').val('');
          return false;
        }
        if (moment($(this).find('tr:eq(4) td:eq(0) input').val(), "DD/MM/YYYY") <= moment($(this).find('tr:eq(3) td:eq(0) input').val(), "DD/MM/YYYY")) {
          alert("Due date should be greater than previous due date");
          $(this).find('tr:eq(4) td:eq(0) input').val('');
          return false;
        }
        return true;
      });
    });
  }
</script>

В моем коде https://jsfiddle.net/Muthu15/ugv0pw93/ я использовал несколько условий if в функции dateValidation javascript.Помоги мне с этим, чтобы превратить это в одноконтурное условие.Я подумал, что его можно преобразовать в один цикл, но если это невозможно, дайте мне лучшее решение для уменьшения кратных условий if.

Я использовал несколько условий if для сравнения двух дат в динамически создаваемых строках таблицы html.

Answer 1

Попробуйте сделать это, убедившись, что он вызывается, когда dateValidation вызывается onclick.

        for(var i = 0; i <= 3; i++) {

            if (moment($(this).find('tr:eq(i + 1) td:eq(0) input').val(), "DD/MM/YYYY") <= moment($(this).find('tr:eq(i + 1) td:eq(i) input').val(), "DD/MM/YYYY")) {
              alert("Due date should be greater than previous due date");
              $(this).find('tr:eq(i + 1) td:eq(i) input').val('');
              return false;
            }

        }

Answer 2

Это должно дать вам представление о том, как вы можете это сделать:

     function dateValidation() {
    $(function() {
      $("[id*=data_table] tbody ").each(function() {
for(j=1;  j<=$(this).find('tr').length; j++) {
        if (moment($(this).find('tr:eq('+j+') td:eq(0) input').val(), "DD/MM/YYYY") <= moment($(this).find('tr:eq('+(j-1)+') td:eq(0) input').val(), "DD/MM/YYYY")) {
          alert("Due date should be greater than previous due date");
          $(this).find('tr:eq(' +j+') td:eq(0) input').val('');
          return false;
        }
      } return true;
      });
    });
  }

Answer 3

Вы можете сделать что-то вроде этого:

// get the date inputs
const dates = Array.from(document.querySelectorAll('[name="due_date[]"]'));

// utility function for creating moments with the desired format string
const m = v => moment(v, "DD/MM/YYYY")

// iterate over each value and compare it to the one before
const invalid = dates.some(
  (input, index, arr) => (
    // if index is zero there's no previous to compare to;
    // otherwise compare against the previous value.
    index > 0 && m(input.value) <= m(arr[index - 1].value)
  )
);

if (invalid) {
  alert("Due date should be greater than previous due date");
  return false;
}