使用JavaScript将最后一个文本框值附加到下一个文本框

Question

获取动态添加的最后一个文本框值，并将该文本框值附加到下一个文本框：

 $('#myTable').on('click', 'input[type="button"]', function() { $(this).closest('tr').remove(); }) $('#add-more').click(function() { var vTime = document.querySelector(".vTime").value; var vDuration = document.querySelector(".vDuration").value; $('#myTable').append('<tr><td><input type="text" id="vTime" placeholder="Enter Time" class="vTime" /></td><td><input type="text" id="vDuration" placeholder="Enter Duration" class="vDuration" /></td><td><input type="button" value="Delete" /></td></tr>') }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable" style="border: 1px solid black"> <tr> <td> <input type="text" placeholder="Enter Time" value="9:30" id="vTime" class="vTime" /> </td> <td> <input type="text" placeholder="Enter Duration" value="30" id="vDuration" class="vDuration" /> </td> <td> <input type="button" value="Delete" /> </td> </tr> </table> <input id="add-more" type="button" value="Add more"> 

在这里，我点击“添加更多”按钮添加下一行。 因此，假设时间文本框的值为9:30 ，分钟文本框的值为30则下一个添加的文本框的值将为10:00 ，分钟文本框的值为30 （可以更改）。

如何获得上一个文本框的值并在其中添加一些时间？

Answer 1

我已经使用momentjs来处理时间。

 $('#myTable').on('click', 'input[type="button"]', function() { $(this).closest('tr').remove(); }) $('#add-more').click(function() { // getting all time inputs var vTimes = document.querySelectorAll(".vTime"); // getting last time input var vTime = vTimes[vTimes.length - 1].value; // getting all duration inputs var vDurations = document.querySelectorAll(".vDuration") // getting last duration input var vDuration = vDurations[vDurations.length - 1].value; // calculating updated time var updatedTime = moment(vTime, 'HH:mm').add(vDuration, 'm').format('HH:mm'); $('#myTable').append('<tr><td><input type="text" id="vTime" placeholder="Enter Time" class="vTime" value="' + updatedTime + '"/></td><td><input type="text" id="vDuration" placeholder="Enter Duration" class="vDuration" value="' + vDuration + '" /></td><td><input type="button" value="Delete" /></td></tr>') }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable" style="border: 1px solid black"> <tr> <td> <input type="text" placeholder="Enter Time" value="9:30" id="vTime" class="vTime" /> </td> <td> <input type="text" placeholder="Enter Duration" value="30" id="vDuration" class="vDuration" /> </td> <td> <input type="button" value="Delete" /> </td> </tr> </table> <input id="add-more" type="button" value="Add more"> 

Answer 2

您可以在javascript中使用从字符串添加15分钟到字符串时间增加分钟的功能。

请注意：属性ID在文档中必须是唯一的。

 $('#myTable').on('click', 'input[type="button"]', function () { $(this).closest('tr').remove(); }); $('#add-more').click(function () { var vTime = $(".vTime:last-child").last().val(); var vDuration = $(".vDuration").last().val(); var nTime = addMinutes(vTime, vDuration); $('#myTable').append('<tr><td><input type="text" placeholder="Enter Time" class="vTime" /></td><td><input type="text" placeholder="Enter Duration" class="vDuration" /></td><td><input type="button" value="Delete" /></td></tr>'); $('.vTime').trigger('input'); }); $('body').on('input', calculateTime); function calculateTime(){ $('tr .vTime').not(':first').each(function(i, el){ var vTime = $(this).closest('tr').prev().find('.vTime').val(); var vDuration = $(this).closest('tr').prev().find('.vDuration').val(); var nTime = addMinutes(vTime, vDuration); $(el).val(nTime); }); } function addMinutes(time, minsToAdd) { function D(J){ return (J<10? '0':'') + J;}; var piece = time.split(':'); var mins = piece[0]*60 + +piece[1] + +minsToAdd; return D(mins%(24*60)/60 | 0) + ':' + D(mins%60); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable" style="border: 1px solid black"> <tr> <td> <input type="text" placeholder="Enter Time" value="9:30" id="vTime" class="vTime" /> </td> <td> <input type="text" placeholder="Enter Duration" value="30" id="vDuration" class="vDuration" /> </td> <td> <input type="button" value="Delete" /> </td> </tr> </table> <input id="add-more" type="button" value="Add more">