如何擺脫NaN / NaN / NaN

Question

在表中，對於“跳過日”列，最后一行的默認值將始終是單詞“ last”（不是數字）。 現在，結果日期顯示為“ NaN / NaN / NaN”，有什么辦法可以用Nil代替。

非常感謝。

  $('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 dt = set.getFullYear() + "-" + ("0" + (set.getMonth() + 1)).slice(-2) + "-" + ("0" + set.getDate()).slice(-2); $row.next('tr').find('.date').attr('value', dt).trigger('change'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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="15" class="day"> </td> <td><input type="text" class="result"> </td> </tr> <tr> <td><input type="date" class="date"></td> <td><input type="text" value="last" class="day"> </td> <td><input type="text" class="result"> </td> </tr> </tbody> </table> 

Answer 1

在這里你有一個解決方案

 $('input.date, input.day').on('change', function () { var $row = $(this).closest('tr'); var start = $row.find('.date').val(); if (!isNaN($row.find(".day").val()) && 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 dt = set.getFullYear() + "-" + ("0" + (set.getMonth() + 1)).slice(-2) + "-" + ("0" + set.getDate()).slice(-2); $row.next('tr').find('.date').attr('value', dt).trigger('change'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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="15" class="day"> </td> <td><input type="text" class="result"> </td> </tr> <tr> <td><input type="date" class="date"></td> <td><input type="text" value="last" class="day"> </td> <td><input type="text" class="result"> </td> </tr> </tbody> </table> 

我已經使用iSNaN來檢查input.day值

希望這會幫助你。

Answer 2

您始終可以手動更新最后一個單元格，以使用以下方式覆蓋Null值： $("#one tbody tr:last-of-type .result")[0].value = 'Nil' 。

在以下示例中可以看到：

 $('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 dt = set.getFullYear() + "-" + ("0" + (set.getMonth() + 1)).slice(-2) + "-" + ("0" + set.getDate()).slice(-2); $row.next('tr').find('.date').attr('value', dt).trigger('change'); } $("#one tbody tr:last-of-type .result")[0].value = 'Nil'; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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="15" class="day"> </td> <td><input type="text" class="result"> </td> </tr> <tr> <td> <input type="date" class="date"></td> <td><input type="text" value="last" class="day"> </td> <td><input type="text" class="result"> </td> </tr> </tbody> </table> 

希望這可以幫助！ :)