如何擺脫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>

希望這有助於！ :)