Question

下面的函数用于在用户选择日期时计算日期范围...但是它仅适用于第一行。为了这我已经为此搜索了一些类似的问题，但似乎仍然无法解决我的问题。

div class="form-group" >
<label for="newRequestedLeaveDay" style=" font-size: 16px; "> New Reqest  date range :  </label></strong>
<div class="form-inline "> 
            <a style=" font-size: 16px; " >From :</a> <input type="text" onchange="cal1(<?php echo  $row['id'];?>)" id="startDate1" class="startDate1 form-control" name="startDate1" style="margin-left:5px"   /> 

            <a style="margin-left:10px;font-size: 16px;">To :</a> <input type="text" onchange="cal1(<?php echo  $row['id'];?>)" id="endDate1" class="endDate1 form-control" name="endDate"  />

        </div> 
    </div>

<div class="form-group"  >
<label for="noldr" style=" font-size: 16x; ">Number of leave days request :</label></strong><input type="text" class="numdays2" id="numdays2" name="numdays2" readonly /><a style="margin-left:10px;font-size: 16px;">Day</a>  
</div>

这是用户选择日期时的函数调用

<script type="text/javascript">

    function GetDay(){
        var dropdate = '';
        var pickdate = '';
        var totalday = '';
            var dropdate = new Date(document.querySelector('.startDate1').value);

            var pickdate = new Date(document.querySelector('.endDate1').value);

            totalday = parseInt((pickdate - dropdate  ) / (24 * 3600 * 1000));
            return totalday;
    }

    function cal1(id) {
    if(document.querySelector('.endDate1')){
        document.querySelector('.numdays2').value=GetDay();

    }  
}

</script>

我尝试了getElementByClassName和getElementById，但是onchange仍然仅只在第一行上工作，我需要的是当用户单击不同的请假请求时，函数cal1（）应该能够为每个行工作。欢迎任何解决方案，谢谢！

Answer 1

document.querySelector仅选择第一个匹配项，document.querySelectorAll返回所有匹配的元素。

Answer 2

尝试以下方法：刚刚为每个输入创建了一个动态ID。像：id="startDate_<?php echo $row['id'];?>"，id="endDate_<?php echo $row['id'];?>"和id="numdays_<?php echo $row['id'];?>"

<div class="form-group" >
<label for="newRequestedLeaveDay" style=" font-size: 16px; "> New Reqest  date range :  </label></strong>
<div class="form-inline "> 
            <a style=" font-size: 16px; " >From :</a> <input type="text" onchange="cal1(<?php echo  $row['id'];?>)" id="startDate_<?php echo  $row['id'];?>" class="startDate1 form-control" name="startDate1" style="margin-left:5px"   /> 

            <a style="margin-left:10px;font-size: 16px;">To :</a> <input type="text" onchange="cal1(<?php echo  $row['id'];?>)" id="endDate_<?php echo  $row['id'];?>" class="endDate1 form-control" name="endDate"  />

        </div> 
    </div>

<div class="form-group"  >
<label for="noldr" style=" font-size: 16x; ">Number of leave days request :</label></strong><input type="text" class="numdays2" id="numdays_<?php echo  $row['id'];?>" name="numdays2" readonly /><a style="margin-left:10px;font-size: 16px;">Day</a>  
</div>

脚本部分：

<script type="text/javascript">

    function GetDay( rowId ){
        var dropdate = '';
        var pickdate = '';
        var totalday = '';
            var dropdate = new Date(document.querySelector('#startDate_' + rowId ).value);

            var pickdate = new Date(document.querySelector('#endDate_' + rowId ).value);

            totalday = parseInt((pickdate - dropdate  ) / (24 * 3600 * 1000));
            return totalday;
    }

    function cal1( rowId ) {
    if(document.querySelector('#numdays_' + rowId)){
        document.querySelector('#numdays_' + rowId ).value=GetDay( rowId );

    }  
}

</script>

数据范围之间的函数计算仅适用于第一行

2 个答案: