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处理时间。

      <?xml version="1.0" encoding="UTF-8" ?>
   <!--
   New Perspectives on XML, 3rd Edition
   Tutorial 8
   Tutorial Project

   Denison Public Library XSLT Style Sheet
   Author: Brigitte Arcoite
   Date:   08/04/2019

   Filename:         library.xsl
   Supporting Files: book.png, dvd.png

   -->

 <xsl:stylesheet version="3.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:xs="http://www.w3.org/2001/XMLSchema"
 exclude-result-prefixes="xs">

 <xsl:output method="html"
  doctype-system="about:legacy-compat"
  encoding="UTF-8"
  indent="yes" />

  <xsl:variable name="thisDate" select="2017-04-12" as="xs:date" />
  <xsl:template match="/">

  <html>
     <head>
        <title>Denison Public Library</title>
        <link href="libstyles.css" rel="stylesheet" type="text/css" 
     />
     </head>

     <header>
        <h1>Denison Public Library</h1>
        <h2>Ennis, Montana</h2>
     </header>

     <body>
         <h2>
             <xsl:value-of select="formatDate($thisDate, '[MNn] [D], 
         [Y]')" />    
         </h2>
           <h1>Checked Out Items</h1>
           <table id="checkoutList">
              <thead>                  
                 <tr>
                    <th>Call No.</th>
                    <th>Title</th>
                    <th>Due Date</th>
                    <th>Overdue? (Y/N)</th>
                    <th>Overdue Category</th>
                 </tr>
              </thead>  
              <tbody>           
              <xsl:apply-templates select="itemlist/item" />
              </tbody>
           </table>
     </body>

  </html>
  </xsl:template>

  <xsl:template match="item">
  <tr>
     <td class="callnoCell">
        <xsl:value-of select="callno" />
     </td>
     <td class="titleCell">
        <xsl:value-of select="title" />
     </td>
     <td class="duedateCell">
        <xsl:value-of select="status/@return" />
     </td>
     <td class="overdueCell">
        <xsl:variable name="overdue" select="
        if($thisDate>status/@return) 
        then $overdue='Y' 
        else $overdue='N'" />
            <xsl:value-of select="$overdue" />
     </td>
     <td class="categoryCell">
        <xsl:variable name="lostDate" select="$thisdate- 
         dayTimeDuration(90)" as="xs:date" />
         <xsl:variable name="longoverdueDate" select="$thisdate- 
         dayTimeDuration(30)" as="xs:date" />
         <xsl:variable name="category" select="
         if($lostDate>status/@return) then $category='Lost'
         else if ($longoverdueDate>status/@return then 
         $category='Long Overdue'
         else if (status/@return>$thisDate) $category='Overdue' 
         else $category=''           " />
         <xsl:value-of select="$category" />
     </td>
    </tr>
   </xsl:template>

  </xsl:stylesheet>

$('#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>')
});

Answer 2

您可以使用函数为Add 15 minutes to string in javascript中的字符串时间增加分钟数。

请注意： 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">

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

2 个答案: