Question

这是我上一个问题（Multiple date selection events to assign a value to an input field）的继续，并且有所发展。我设法部分解决了该问题，当我使用document.getElementById时，此方法仅适用于一个。我知道ID必须两者都不同才能同时使用，因此我正在尝试使用ClassName。在这里，我得到了studk。我正在努力使它适用于使用ClassName的数组。任何帮助将不胜感激。下面是用于ID的一个。

<table class='table' id="tb_actions">
<thead>
<tr>
<th class="text-center" > Due </th>
<th class="text-center" > Date Complete </th>
<th class="text-center" > Overdue </th>
</tr>
</thead>

<tbody>
<tr>
<td><input type="date" name="dt_due[]" id="datedue" class="form-control" /></td>
<td><input type="date" name="dt_complete[]" id="datecomplete" class="form-control"  /></td>
<td><input type="text" name="overdue[]" id="overdue" class="form-control" /></td>
</tr>

<tr>
<td><input type="date" name="dt_due[]" id="datedue" class="form-control" /></td>
<td><input type="date" name="dt_complete[]" id="datecomplete" class="datecomplete form-control" /></td>
<td><input type="text" name="overdue[]" id="overdue" class="form-control" /></td>
</tr>

</tbody>
</table>

<p id="demo1"></p>
<p id="demo2"></p>


<script>

const d1 = document.getElementById("datedue");
const d2 = document.getElementById("datecomplete");
const od = document.getElementById("overdue");

$("#datecomplete").on("change", function () {
 var dd1 = new Date($('#datedue').val());
 var dd2 = new Date($('#datecomplete').val());

document.getElementById("demo1").innerHTML = dd1
document.getElementById("demo2").innerHTML = dd2

    if( dd2 > dd1){
     od.value = 'Yes';
     od.style.color = 'red'
     } else {
     od.value = 'No';
     od.style.color = 'blue'
    }
    });

</script>

Answer 1

您可以尝试以下操作，fiddle

<table class='table' id="tb_actions">
<thead>
<tr>
<th class="text-center" > Due </th>
<th class="text-center" > Date Complete </th>
<th class="text-center" > Overdue </th>
</tr>
</thead>

<tbody>
<tr>
<td><input type="date" name="dt_due[]" id="datedue" class="form-control" /></td>
<td><input type="date" name="dt_complete[]" id="datecomplete" class="form-control datecomplete"  /></td>
<td><input type="text" name="overdue[]" id="overdue" class="form-control" /></td>
</tr>

<tr>
<td><input type="date" name="dt_due[]" id="datedue" class="form-control" /></td>
<td><input type="date" name="dt_complete[]" id="datecomplete" class="datecomplete form-control" /></td>
<td><input type="text" name="overdue[]" id="overdue" class="form-control" /></td>
</tr>

</tbody>
</table>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
  $(".datecomplete").on("change", function () {
     var parent = $(this).closest("tr");
   var dd1 = new Date(parent.find('#datedue').val());
   var dd2 = new Date(parent.find('#datecomplete').val());
   var od = parent.find('#overdue');

   document.getElementById("demo1").innerHTML = dd1
   document.getElementById("demo2").innerHTML = dd2

    if( dd2 > dd1){
       $(od).val('Yes');
       $(od).css('color', 'red')
     } else {
       $(od).val('No');
       $(od).css('color', 'blue')
     }
});
</script>

如何将与id一起使用的函数替换为classname

1 个答案: