2番目のテーブル行の開始日が1行目の結果日付を取得できません

日付の最初の行が変更されると、その結果の日付が表示されます。問題は、開始日の2行目です.1行目の結果の日付を取得し、そのスキップ日数に応じて変更し、結果の日付を表示するとします。2番目のテーブル行の開始日が1行目の結果日付を取得できません

$('input.date, input.day').on('change',function() { 
 

 
    var $row = $(this).closest('tr'); 
 
    
 
    var start = $row.find('.date').val(); 
 
if (start) { 
 

 
    var set = new Date(start); 
 

 
    set.setDate(set.getDate() + Number($row.find(".day").val())); 
 

 
    $row.find(".result").val([set.getMonth() + 1, set.getDate(), set.getFullYear()].join('/')); 
 
    
 
    $row.next('tr') 
 
     .find('.date').val([set.getMonth() + 1, set.getDate(), set.getFullYear()].join('/')).trigger('change'); 
 
    
 
    
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<table id="one"> 
 
    <th>Date</th> 
 
    <th>Skip days</th> 
 
    <th>Result</th> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="date" class="date"></td> 
 
     <td><input type="text" value="10" class="day"> </td> 
 
     <td><input type="text" class="result"> </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <input type="date" class="date"></td> 
 
     <td><input type="text" value="5" class="day"> </td> 
 
     <td><input type="text" class="result"> </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

ここで結果

14/10/17  5  19/10/17 
19/10/17  3  22/10/17

出典

2017-10-14 epiphany

2行目の日は感謝 –

ケアを削除取得されているので... – epiphany

を追加しました。

変更行：

$row.next('tr').find('.date').val([set.getMonth() + 1, set.getDate(), set.getFullYear()].join('/')).trigger('change');

var dt = set.getFullYear() + "-" + ("0" + (set.getMonth() + 1)).slice(-2) + "-" + ("0" + set.getDate()).slice(-2); 
$row.next('tr').find('.date').attr('value', dt).trigger('change');

、それが動作するまで。

$('input.date, input.day').on('change', function() { 
 
\t var $row = $(this).closest('tr'); 
 
\t var start = $row.find('.date').val(); 
 
\t if (start) { 
 
\t \t var set = new Date(start); 
 
\t \t set.setDate(set.getDate() + Number($row.find(".day").val())); 
 
\t \t $row.find(".result").val([set.getMonth() + 1, set.getDate(), set.getFullYear()].join('/')); 
 
\t \t var dt = set.getFullYear() + "-" + ("0" + (set.getMonth() + 1)).slice(-2) + "-" + ("0" + set.getDate()).slice(-2); 
 
\t \t $row.next('tr').find('.date').attr('value', dt).trigger('change'); 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<table id="one"> 
 
\t <th>Date</th> 
 
\t <th>Skip days</th> 
 
\t <th>Result</th> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="date" class="date"></td> 
 
\t \t \t <td><input type="text" value="10" class="day"> </td> 
 
\t \t \t <td><input type="text" class="result"> </td> 
 
\t \t </tr> 
 

 
\t \t <tr> 
 
\t \t \t <td> 
 
\t \t \t \t <input type="date" class="date"></td> 
 
\t \t \t <td><input type="text" value="5" class="day"> </td> 
 
\t \t \t <td><input type="text" class="result"> </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

出典

2017-10-14 15:25:53

入力タイプは問題に実際には関係ありません – charlietfl

私は開始日を変更しようとするが、2回目には何の考えでも失敗するのは初めてですか？ – epiphany

上記のスニペットでは、最初の行の開始日を複数回変更することができ、それに応じて他の日付も変更されます。 –

はあなたのコードに関して最小コード操作とスニペットです。はちょうどあなたがyear-month-date形式でinput type dateに日付値を設定する必要があり、別の関数とその良い

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 

 

 
<table id="one"> 
 
    <th>Date</th> 
 
    <th>Skip days</th> 
 
    <th>Result</th> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="date" class="date"></td> 
 
     <td><input type="text" value="10" class="day"> </td> 
 
     <td><input type="text" class="result"> </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <input type="date" class="date"></td> 
 
     <td><input type="text" value="5" class="day"> </td> 
 
     <td><input type="text" class="result"> </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 
<script> 
 
    
 
    
 
function formatDate(date) { 
 
    var d = new Date(date), 
 
     month = '' + (d.getMonth() + 1), 
 
     day = '' + d.getDate(), 
 
     year = d.getFullYear(); 
 

 
    if (month.length < 2) month = '0' + month; 
 
    if (day.length < 2) day = '0' + day; 
 

 
    return [year, month, day].join('-'); 
 
} 
 

 

 
$('input.date, input.day').on('change',function() { 
 

 
    var $row = $(this).closest('tr'); 
 
    
 
    var start = $row.find('.date').val(); 
 
    
 
if (start) { 
 
    
 
    var set = new Date(start); 
 

 
    set.setDate(set.getDate() + Number($row.find(".day").val())); 
 

 
    $row.find(".result").val([set.getMonth() + 1, set.getDate(), set.getFullYear()].join('/')); 
 
    
 
    
 
    var rawDate= [set.getMonth() + 1, set.getDate(), set.getFullYear()].join('/'); 
 
    var strformat =formatDate(rawDate);  
 
    
 
    $row.next('tr').find('.date').val(strformat).trigger('change') 
 
} 
 
}); 
 

 
</script> 
 
</body> 
 
</html>

出典

2017-10-14 15:24:41

2行目の開始日はまだ1番目の行の結果の日付をつかむカント、少し詳しく説明するので、ナン – epiphany

okayyy。 ...あなたは1日目の結果を2日目の開始日にしたいと思っています。 –

はい、それは正しい – epiphany

2番目のテーブル行の開始日が1行目の結果日付を取得できません

答えて

関連する問題