如何比较日期并从选择列表中选择选项？

Question

我正在尝试为以下内容编写代码（先上图展示表格的想法）：

只有当我从下拉列表中选择“付款日期”时，我才需要比较日期，这是我的触发器。 ManualDate 可以由用户选择。如果 InvDate

问题是我必须知道如何从给定单元格中选择值并与来自另一个单元格但在同一行中的其他值进行比较。

我的观点：

    @foreach (var item in Model)
    {
        <tr>
            <td class="invoice">
                @Html.DisplayFor(modelItem => item.InvDate)
            </td>
            <td>
                <select class="decisionList">
                    <option selected></option>
                    <option>Payment Date</option>
                    <option>None</option>
                </select>
            </td>
            <td>
                <input class="dates" type="data">
            </td>
        </tr>
    }

我的 jQyery（只是一个糟糕的尝试）：

$('.decisionList').change(function () {


    const i = this.selectedIndex;
    var date =  $(this).closest('tr').find('.dates');


    if (i == 1 && ($('.invoice').val() < date.val())) { //if InvDate < ManualDate

        date.val($('.invoice').val()); //then we should return InvDate to our data input

    } else {
        date.val(); //if not  - return ManualDate
    }

    $(this).closest('tr').find('.decisionList')[2]; //make 'None' (index=2) as a selected option

});

我是初学者，所以请给我一些提示。我真的不知道如何比较给定（不是全部）行中相应单元格的值。也许我需要使用 .each 指令并将迭代器值分配给每个字段（在每一列中）以识别列之间的字段？

Answer 1

您可以为date 字段编写事件处理程序，而不是为选择框编写change 事件处理程序。所以，如果选择框的值为1，那么只有date的值会发生变化。

因此，在更改date 字段时，我们可以使用$(this).closest() 获得最接近的tr，然后使用它我们可以获得第一个td 的值，它也具有日期字段和选择框值的值。然后只需比较两个值并据此更改您的dates 输入。

演示代码：

$('.dates').change(function() {
  var $this = $(this).closest("tr");
  //get selectbox slected option index
  var i = $this.find("select option:selected").index()
  if (i == 1) {
    //get manual date
    var date_man = new Date($(this).val())
    //get inv date
    var data_inv = new Date($.trim($this.find("td:eq(0)").text()));
    //comapre
    if (data_inv < date_man) {
      $(this).val($.trim($this.find("td:eq(0)").text()));
    }
    //selcted index 2
    $this.find('select').prop('selectedIndex', 2);
  } else {
    //empty
    $(this).val("")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="invoice">
      2020-09-18
    </td>
    <td>
      <select class="decisionList">
        <option selected></option>
        <option>Payment Date</option>
        <option>None</option>
      </select>
    </td>
    <td>
      <input class="dates" type="date">
    </td>
  </tr>
  <tr>
    <td class="invoice">
      2020-10-31
    </td>
    <td>
      <select class="decisionList">
        <option selected></option>
        <option>Payment Date</option>
        <option>None</option>
      </select>
    </td>
    <td>
      <input class="dates" type="date">
    </td>
  </tr>
</table>