如何用一個開始日期更改多個錶行的日期

Question

現在，當每行中選擇一個開始日期並單擊確定時，結束日期將相應顯示。所以每個表格行必須手動點擊一個按鈕來顯示結束日期。

我想知道是否有可能，如果我只能選擇一個開始日期，然後點擊確定， 不僅第一行結束日期顯示，而且第二，第三...等行start date和end date會自動顯示因此到間隔天數

PS：請注意，來自數據庫的行數是動態的，並且總行數未知。

任何想法將不勝感激。謝謝 ！！

(function($, window, document, undefined){ 
 

 
    $(".addSkip").click(function() { 
 
    // row instance to use `find()` for the other input classes 
 
    var $row = $(this).closest('tr'); 
 

 
    var date = new Date($row.find(".start_date").val()+" 0:00:00"), 
 
     days = parseInt($row.find(".days").val(), 10); 
 
    
 
    console.log(date.getDate()); 
 
    console.log(days); 
 

 
    if (!isNaN(date.getTime())) { 
 
     date.setDate(date.getDate() + days); 
 

 
     $row.find(".end_date").val(date.toInputFormat()); 
 
    } else { 
 
     alert("Invalid Date"); 
 
    } 
 
    }); 
 

 
    Date.prototype.toInputFormat = function() { 
 
    var yyyy = this.getFullYear().toString(); 
 
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based 
 
    var dd = this.getDate().toString(); 
 
    return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding 
 
    }; 
 
}) 
 
(jQuery, this, document);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table> 
 
<th> 
 
start</th> 
 

 
<th>end</th> 
 
<th>interval</th> 
 
    <tr> 
 
    <td><input type="date" size="15" name="date[]" class="start_date" \> 
 
     <input type="button" size="10" value="ok" class="addSkip"></td> 
 
    <td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td> 
 
    <td><input type="text" size="3" name="skip[]" class="days" value="10"> </td> 
 

 
    </tr> 
 
    
 
    <tr> 
 
    <td><input type="date" size="15" name="date[]" class="start_date" \> 
 
     <input type="button" size="10" value="ok" class="addSkip"></td> 
 
    <td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td> 
 
    <td><input type="text" size="3" name="skip[]" class="days" value="10"> </td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="date" size="15" name="date[]" class="start_date" \> 
 
     <input type="button" size="10" value="ok" class="addSkip" ></td> 
 
    <td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td> 
 
<td><input type="text" size="3" name="skip[]" class="days" value="10"> 
 
    
 
    </tr> 
 
</table>

期望的結果

start   end   interval 
13/10/17  20/10/17   7 
20/10/17  23/10/17   3 
23/10/17  30/10/17   7 

...... 等

Answer 1

我已經刪除了「確定」按鈕，取而代之的是簡單的改變事件（無論在DATE_START和天），並且增加了邏輯您的需求！如果事情是不明確的，不esitate要求澄清;）

(function($, window, document, undefined){ 
 
$('input.start_date, input.days').on('change',function() { 
 
    var $row = $(this).closest('tr'), 
 
     $start = $row.find('.start_date'), 
 
     $end = $row.find('.end_date'), 
 
     $other = $row.find('.otherfield'), 
 
     $interval = $row.find('.days'), 
 
     date = new Date($start.val()+" 0:00:00"), 
 
     days = parseInt($interval.val(), 10); 
 
    
 
    console.log(date.getDate()); 
 
    console.log(days); 
 

 
    if (!isNaN(date.getTime())) { 
 
     date.setDate(date.getDate() + days); 
 

 
     $end.val(date.toInputFormat()); 
 
     $other.val(date.toInputFormat()); 
 
     $row.next('tr') 
 
     .find('.start_date').val(date.toInputFormat()).trigger('change'); 
 
    } else { 
 
     console.log("Invalid Date"); 
 
    } 
 
    }); 
 

 
    Date.prototype.toInputFormat = function() { 
 
    var yyyy = this.getFullYear().toString(); 
 
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based 
 
    var dd = this.getDate().toString(); 
 
    return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding 
 
    }; 
 
}) 
 
(jQuery, this, document);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
    <th>start</th> 
 
    <th>end</th> 
 
    <th>other</th> 
 
    <th>interval</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><input type="date" size="15" name="date[]" class="start_date" \> 
 
     <td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td> 
 
     <td><textarea class="otherfield"></textarea></td> 
 
     <td><input type="text" size="3" name="skip[]" class="days" value="10"> </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="date" size="15" name="date[]" class="start_date" \> 
 
     <td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td> 
 
     <td><textarea class="otherfield"></textarea></td> 
 
     <td><input type="text" size="3" name="skip[]" class="days" value="10"> </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="date" size="15" name="date[]" class="start_date" \> 
 
     <td><input type="text" size="15" name="nextdate[]" class="end_date" \> </td> 
 
     <td><textarea class="otherfield"></textarea></td> 
 
     <td><input type="text" size="3" name="skip[]" class="days" value="10"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

在jQuery中，你可以做這樣的事情來查找多個元素：

$row.find("*[class^=".end_date"]")

欲瞭解更多詳情，請參閱jquery selectors