如何摆脱NaN / NaN / NaN

Question

In the table, for the skips day column, the last row's default value will always be the word "last" which isn't a number. Now, the result date show "NaN/NaN/NaN",is there any way that i can replace that with sth like Nil.

Many thanks.

  $('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

Here you go with a solution

 $('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> 

I've used iSNaN to check the input.day value

Hope this will help you.

Answer 2

You could always just manually update the last cell to overwrite the Null value with something like: $("#one tbody tr:last-of-type .result")[0].value = 'Nil' .

This can be seen in the following example:

 $('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> 

Hope this helps! :)