如何使用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>