Question

我的代码只适用于一个表。当我单击提交时，我可以保存当前显示的表中的数据。

但我真正想要的是保存所有表格中的数据（我知道那里只有一个，而我认为这就是问题，因为我使用同一张桌子而我只是清空身体）。

基本上我想提交所选表格（DDA，MTG，SAV）中所有表格中的数据，并保留已保存的数据，例如，如果我更改DDA表格上的值，当我再次选择另一个表格和DDA时它应该显示我的变化。

＆＃13;

$(document).ready(function() {

    var types = [];
    var amountOfDayEnds = 4;
    var table;

    function DisplayTable() {
        var data = "";
        //Table
        $('.dataTableBody').empty();
  
        for(var i=1;i<=amountOfDayEnds;i++) {
            data += '<tr align="center">';
            data += '<td>' + i + '</td>';
            $.each(types, function (index, value) {
                data += '<td>' + '<input class="text-center amountOfAccounts" type="number" value="0" min="0" max="500" name="dataAccounts[]" data-error="Please, insert a value"  required></td>'
            });
            data += '</tr>';
        }
        $('.dataTableBody').append(data);
    }

    DisplayTable();


//Repeat the value for all rows in Clients Table
    $('.repeatForAll').change(function () {
        var number = $('.repeatForAll').val();
        $('.amountOfClients').val(number);
    });

    //$('#page2').validator();


    //create the interdepent selectors
    function initSelectors(){
        // next 2 statements should generate error message, see console
        MAIN.createRelatedSelector();
        MAIN.createRelatedSelector(document.querySelector('#cls') );

        //countries
        MAIN.createRelatedSelector
        ( document.querySelector('#cls')           // from select element
            ,document.querySelector('#group')      // to select element
            ,{                                               // values object
                Deposit: ['DDA','SAV'],
                Loan: ['MTG'],
            }
            ,function(a,b){return a>b ? 1 : a<b ? -1 : 0;}   // sort method
        );
    }

//create MAIN namespace
    (function(ns){ // don't pollute the global namespace

        function create(from, to, obj, srt){
            if (!from) {
                throw CreationError('create: parameter selector [from] missing');
            }
            if (!to) {
                throw CreationError('create: parameter related selector [to] missing');
            }
            if (!obj) {
                throw CreationError('create: related filter definition object [obj] missing');
            }

            //retrieve all options from obj and add it
            obj.all = (function(o){
                var a = [];
                for (var l in o) {
                    a = /array/i.test (o[l].constructor) ? a.concat(o[l]) : a;
                }
                return a.sort(srt);
            }(obj));
            // initialize and populate to-selector with all
            populator.call( from
                ,null
                ,to
                ,obj
                ,srt
            );

            // assign handler
            from.onchange = populator;

            function initStatics(fn,obj){
                for (var l in obj) {
                    if (obj.hasOwnProperty(l)){
                        fn[l] = obj[l];
                    }
                }
                fn.initialized = true;
            }

            function populator(e, relatedto, obj, srt){
                // set pseudo statics
                var self = populator;
                if (!self.initialized) {
                    initStatics(self,{optselects:obj,optselectsall:obj.all,relatedTo:relatedto,sorter:srt || false});
                }

                if (!self.relatedTo){
                    throw 'not related to a selector';
                }
                // populate to-selector from filter/all
                var optsfilter = this.selectedIndex < 1
                    ? self.optselectsall
                    : self.optselects[this.options[this.selectedIndex].firstChild.nodeValue]
                    ,cselect = self.relatedTo
                    ,opts = cselect.options;
                if (self.sorter) optsfilter.sort(self.sorter);
                opts.length = 0;
                for (var i=0;i<optsfilter.length;i+=1){
                    opts[i] = new Option(optsfilter[i],optsfilter[i]);
                }
            }
        }

        // custom Error
        function CreationError(mssg){
            return {name:'CreationError',message:mssg};
        }

        // return the create method with some error handling
        window[ns] = {
            createRelatedSelector: function(from,to,obj,srt) {
                try {
                    if (arguments.length<1) {
                        throw CreationError('no parameters');
                    }
                    create.call(null,from,to,obj,srt);
                }
                catch(e) { console.log('createRelatedSelector ->',e.name,'\n'
                    + e.message +
                    '\ncheck parameters'); }
            }
        };
    }('MAIN'));

    //initialize
    initSelectors();

    //get account types based on group
    $('#group').change(TypesChanged);
    $('#cls').change(TypesChanged);

    function TypesChanged() {
        var columnStructure = "";
        selectedGroup = $('#group').val();

        switch (selectedGroup) {
            case "DDA":
                types = ["400","4044","4045"];
                break;
            case "SAV":
                types = ["300","310"];
                break;
            case "MTG":
                types = ["700","710"];
                break;
        }
        console.log("Selected group: " + selectedGroup + ", Types: " + types);
        $('.dataTableHead').empty();
        $('.dataTableFooter').empty();
        columnStructure += '<tr align="center">';
        columnStructure += '<th class="text-center">Day</th>';

        $.each(types, function (index, value) {
            columnStructure += '<th class="text-center">Type ' + value + '</th>';
        });
        columnStructure += '</tr>';
        $('.dataTableHead').append(columnStructure);
        $('.dataTableFooter').append(columnStructure);
        DisplayTable();
        table = $('#dataTable').DataTable();
    }

    TypesChanged();


    $('#btnSubmit').click( function() {
        var data = table.$('input, select').serializeArray();
        console.log(data);
        var group = $('#group').val();
        data.push({name: 'group', value: group});
        console.log(data);

        $.ajax({
            type: 'post',
            url: 'Accounts',
            data: data,
            success: function () {
                $('#result').html("Data saved...");
                $('#result').addClass("alert alert-success");
                window.location.href = "/transactions.jsp";
            },
            error: function () {
                $('#result').html("Error...");
                $('#result').addClass("alert alert-danger");
            }
        });
        return false;
    });

    $('#btnReset').click(function () {
        $('#page3').trigger('reset');
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>




 <div class="row mb-2">
                        <label>
                            Show
                            <select name="cls" id="cls">
                                <option value="All">All</option>
                                <option value="Deposit">Deposit</option>
                                <option value="Loan">Loan</option>
                            </select>
                        </label>
                    </div>
                    <div class="row" style="margin-bottom: 20px;">
                        <label>
                            Show
                            <select name="group" id="group">
                                
                            </select>
                        </label>
                    </div>
                      <div class="text-right" style="margin-top: 25px;">
                        <button type="button" class="btn btn-danger mr-2" id="btnReset">Reset</button>
                        <button type="submit" class="btn btn-success mr-2" id="btnSubmit">Submit</button>
                    </div>
                    <div class="row mb-2">
                        <!-- Example DataTables Card-->
                        <div class="card col-lg-12">
                            <div class="card-body">
                                <div class="table center-aligned-table table-striped">
                                    <table class="table center-aligned-table" id="dataTable">
                                        <thead class="dataTableHead">
                                       
                                        </thead>
                                        <tfoot class="dataTableFooter">
                              
                                        </tfoot>
                                        <tbody class="dataTableBody">
                           
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

＆＃13;

从表单中获取数据

0 个答案: