如何使用javascript根据动态表各行中的输入值添加天数

Question

我的问题是，我必须根据文本框中输入的内容为动态表的所有行添加天数。 我为2行添加了天数，但3,4 ...行显示了2行的值。 现在我想在第三行中添加天数，然后继续.....

       <script type="text/javascript">
    $(function(){

        $("body").on("focusout",function(){

            var trLength=$('body #appendRows tr').length;
            for (var i = 1; i <trLength; i++) {
                $('#appendRows tr:nth-child(2)').remove();
            }


            var val  = $(".ND").val();
             var m  =  $("#follow_Date").val();



                    var j = $("#Amount").val();
                    var k = document.getElementById('txtDate').value;
                    var date = new Date(k);
                    var newdate = new Date(date);
                    newdate.setDate(newdate.getDate() +
                        parseInt(m));

                    var dd = newdate.getDate();
                    var mm = newdate.getMonth() + 1;
                var y = newdate.getFullYear();
                 var someFormattedDate = mm+ '/' + dd + '/' + y;

            var i=1;
            for(i==1;i<val;i++){
                var html = $("#appendRows tr:first-child").clone();
                html.find("input").val("");
                html.find('input[name^="Sno"]').val(i+1);
              html.find('input[name^="Date"]').val(someFormattedDate + parseInt(m));
                 html.find('input[name^="Amount"]').val(j);
                 console.log(date, i, someFormattedDate)
                $('#appendRows').append(html);
            }
        });
    })
</script>

这是用于创建表格的javascript代码。.............

这是我的动态表格，它将根据文本字段中的输入值创建...

<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
                            <thead>
                                <tr>

                                    <th>Sno</th>
                                    <th >Date</th>
                                    <th >Amount</th>
                                    <th >Bank Name</th>
                                    <th >Chqamt</th>
                                    <th >Payable</th>
                                    <th>Bank1</th>
                                    <th >Chqamt1</th>
                                    <th >Payable1</th>
                                </tr>
                                </thead>
                                <tbody id="appendRows">
                                <tr>

                                <td ><input style="width:40px" type="text" class="form-control" name="Sno[]" value="1" id="Sno"></td>

                                <td><input style="width:80px" type="text" class="form-control" name="Date[]" value="" id="Date"></td>

                                <td> <input style="width:70px" type="text" class="form-control" name="Amount[]" value="" id="Amount"></td>

                                <td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>

                                <td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>

                                <td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>

                                <td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>

                                <td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>

                                <td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>



                                </tr>
                            </tbody>
                        </table>

这是表格代码.........

    <label class="col-lg-1 control-label" id="pd">Due Start:</label>
                                <div class="col-lg-3">
                                    <div class="row">
                                    <div class="col-lg-4">
                                            <input type="text" class="form-control input-xs datepicker-dates Dues" placeholder="Due Start Date&hellip;" id="txtDate" name="TDDate" value="">
                                        </div>

                                    </div>
                                </div>

</div>

                        </div>
                        </fieldset>
                        <div class="col-md-2">
                            <div class="form-group">
                                <fieldset>
                                <label class="col-lg-1 control-label" id="pd">Mode:</label>
                                <div class="col-lg-3">
                                    <div class="row">
                                    <div class="col-lg-4">
                                            <input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
                                        </div>

                                    </div>
                                </div>

</div>

这是应有的启动和模式文本框代码.........

Answer 1

基于注释，在keyup输入中输入数字时，请在Mode输入中使用Mode事件以添加行...并仅将0天添加到第一次出现日期

function add() {
  var val = $(".Mode").val();
  var currentdate = document.getElementById('txtDate').value;
  currentdate = getDueDate(currentdate, 0);
  
  $("#appendRows tr").not('.master-row').remove(); // remove previous rows (reset the table)

  for (var i = 0; i < val; i++) {
    
    var someFormattedDate = formatDate(currentdate);
    var html = $("#appendRows tr:first-child").clone();
    html.find("input").val("");
    html.find('input[name^="Sno"]').val(i + 1);
    html.find('input[name^="Date"]').val(someFormattedDate);
    html.removeClass('master-row');
    $('#appendRows').append(html);
    currentdate = getDueDate(currentdate, val);
  }
}

function formatDate(date) {
  var dd = date.getDate();
  var mm = date.getMonth() + 1;
  var y = date.getFullYear();
  return mm + '/' + dd + '/' + y;
}

function getDueDate(from, days) {
  var fromDate = new Date(from);
  var dueDate = new Date(from);
  dueDate.setDate(fromDate.getDate() + days * 1);

  return dueDate;
}
add();
$('.Mode').on('keyup', function() {
  add();
});

.master-row {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
the data
<div>
  <input type="text" class="Mode" value="3">
  <input type="text" id="txtDate" value="12/29/2018">
</div>

<div style="height:20px">

</div>
the table
<table id="appendRows">
  <tr class="master-row">
    <td><input type="text" name="Sno"></td>
    <td><input type="text" name="Date"></td>
  </tr>
</table>

要隐藏“主行”，我会这样做，也最好将代码拆分为单独的功能

Answer 2

已更新

$(function(){
  $('#txtDate, #follow_Date, .ND').keyup( function () {

    // Clear rows
    var trLength = $('body #appendRows tr').length;
    for (var i = 1; i <trLength; i++) {
      $('#appendRows tr:nth-child(2)').remove();
    }

    var val = (!$(".ND").val()) ? 1 : val = $(".ND").val();
    var m  =  $("#follow_Date").val();
    var j = $("#Amount").val();
    var k = document.getElementById('txtDate').value;
    var currentDate = moment(k); 
    
    for (var i = 0, len = val; i < val; ++i) {
      var newdate = currentDate.add(parseInt(m), 'days');
      var html = $("#appendRows tr:first-child").clone();
      html.find("input").val("");
      html.find('input[name^="Sno"]').val(i+1);
      html.find('input[name^="Amount"]').val(j);
      // I format this to make it clear
      html.find('input[name^="Date"]')
          .val(newdate.format('YYYY/MM/DD'));
      $('#appendRows').append(html);
    }
    
    // Remove that first row
    $("#appendRows tr:first-child").remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<div>
<label class="col-lg-1 control-label" id="pd">Due Start:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="text" class="form-control input-xs datepicker-dates Dues" placeholder="Due Start Date&hellip;" id="txtDate" name="TDDate" value="2018/12/12">
</div>
</div>
</div>
</div>

<div class="col-md-2">
<div class="form-group">
<fieldset>
<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode" value="30">
</div>
</div>
</div>

<label class="col-lg-1 control-label" id="pd">Rows:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" class="ND" placeholder="Number of rows" name="TMode" class="form-control input-xs Mode" value="10">
</div>
</div>
</div>

</fieldset>
</div>
</div>

<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>

<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody id="appendRows">
<tr>

<td ><input style="width:40px" type="text" class="form-control" name="Sno[]" value="1" id="Sno"></td>

<td><input style="width:80px" type="text" class="form-control" name="Date[]" value="" id="Date"></td>

<td> <input style="width:70px" type="text" class="form-control" name="Amount[]" value="" id="Amount"></td>

<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>

<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>

<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>

<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>

<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>

<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>



</tr>
</tbody>
</table>