JS Tables creation

  

   function CreateSprints() {

            for (var i = 0; i < 4; i++) {

                var sprint = "Sprint " + i;

                var liPanel = "liPanel" + i;

                var tabid = "Sprint-" + i;

                var tableId = "table-" + i;

                var phaeHref = '<li id="'+liPanel+'" ><a href="#' + tabid + '">' + sprint + '</a></li>';

                $('#phaselink').append(phaeHref);

                // divHtml = divHtml + '</div>';

                var milestoneNameId = "m" + i + "Name" + 1;

                var milestoneDateId = "m" + i + "Date" + 1;

                var milestoneRowId = "m" + i + "RowId" + 1;

                var sprintStartDateId = "s" + i + "SDate" + 1;

                var sprintEndDateId = "s" + i + "EDate" + 1;

                var sprintRowId = "s" + i + "RowId" + 1;

                var paasingValues = "this," + i;

                var tableRow = '<div id="' + tabid + '" class = "sprintDivCls">' +

                    '<table class="sprinttableCls" id="' + tableId + '"><thead></thead>' +

                    '<tbody>' +

                    '<tr>' +

                    '<td><input type="text" class="form-control" id="' + sprintRowId + '" /></td > ' +

                    '<td>StartDate</td>' +

                    '<td><input type="text" class="form-control sprintdatecls" id="' + sprintStartDateId + '" /></td > ' +

                    '<td>EndDate</td> ' +

                    '<td><input type="text" class="form-control sprintdatecls" id="' + sprintEndDateId + '" /></td ><td></td> ' +

                    '</tr>' +

                    '<tr>' +

                    '<td><input type="text" class="form-control" id="' + milestoneRowId + '" /></td > ' +

                    '<td>MileStone Name</td>' +

                    '<td><input type="text" class="form-control" id="' + milestoneNameId + '" /></td > ' +

                    '<td>MileStone Date</td> ' +

                    '<td><input type="text" class="form-control sprintdatecls" id="' + milestoneDateId + '" /></td > ' +

                    '<td><span class="ui-symb ui-icon-circle-plus" onclick="addTableRow(' + paasingValues + ')"></span>  ' +

                    '</td >' +

                    '</tr>' +

                    '<tbody></table>' + '</div>';

                //$('#' + tabid).append(tableRow);

                $('#tabs').append(tableRow);

                if (i == 3) {

                    $('#phaselink').append('<li style="float:right;"><a href="#tabs-8">SIS - Project Cost Management</a></li>');

                    $('#tabs').tabs();

                }

            }

            addDatePicker("sprintdatecls");

        }

        function AddNewSprint() {

            var sprintCount = $('#tabs >ul> li');

            var i = sprintCount.length - 2;

            var liPanel = "liPanel" + i;

            var sprint = "Sprint " + i;

            var tabid = "Sprint-" + i;

            var tableId = "table-" + i;

            var sprintRemoveId = "spanRemv-" + i; 

            if (i > 4) {

                var existingRemoveId = "spanRemv-" + (i - 1);

                $('#' + existingRemoveId).hide();

            }

            var phaeHref = '<li id="'+liPanel+'" ><a href="#' + tabid + '">' + sprint + '<span id="'+sprintRemoveId+'" class="ui-symb-closeBtn ui-icon-circle-close" onclick="RemoveSprint('+i+')"></span></a></li>';

            $('#phaselink').append(phaeHref);

                var milestoneNameId = "m" + i + "Name" + 1;

                var milestoneDateId = "m" + i + "Date" + 1;

                var milestoneRowId = "m" + i + "RowId" + 1;

                var sprintStartDateId = "s" + i + "SDate" + 1;

                var sprintEndDateId = "s" + i + "EDate" + 1;

                var sprintRowId = "s" + i + "RowId" + 1;

                var paasingValues = "this," + i;

            // divHtml = divHtml + '</div>';

            var tableRow = '<div id="' + tabid + '" class = "sprintDivCls">' +

                '<table class="sprinttableCls" id="' + tableId + '"><thead></thead>' +

                '<tbody>' +

                '<tr>' +

                    '<td><input type="text" class="form-control" id="' + sprintRowId + '" /></td > ' +

                    '<td>StartDate</td>' +

                    '<td><input type="text" class="form-control sprintdatecls" id="' + sprintStartDateId + '" /></td > ' +

                    '<td>EndDate</td> ' +

                    '<td><input type="text" class="form-control sprintdatecls" id="' + sprintEndDateId + '" /></td ><td></td> ' +

                '</tr>' +

                '<tr>' +

                    '<td><input type="text" class="form-control" id="' + milestoneRowId + '" /></td > ' +

                    '<td>MileStone Name</td>' +

                    '<td><input type="text" class="form-control" id="' + milestoneNameId + '" /></td > ' +

                    '<td>MileStone Date</td> ' +

                    '<td><input type="text" class="form-control sprintdatecls" id="' + milestoneDateId + '" /></td > ' +

                    '<td><span class="ui-symb ui-icon-circle-plus" onclick="addTableRow(' + paasingValues + ')"></span> ' +

                    '<span class="ui-symb ui-icon-circle-minus" onclick="removeTableRow(this)"></span> </td >' +

                '</tr>' +

                '<tbody></table>' + '</div>';

            //$('#' + tabid).append(tableRow);

            $('#tabs').append(tableRow);

            $('#tabs').tabs('refresh');

            addDatePicker("sprintdatecls");

        }

        function removeTableRow(delTableRow) {

            $(delTableRow).closest("tr").remove()

            //  $(delTableRow).parents("tr").remove();

        }

        function addTableRow(tableIdd, i) {

            var tableId = "table-" + i;

            var myTab = document.getElementById(tableId);

            var rowsCount = myTab.rows.length;

            var milestoneNameId = "m" + i + "Name" + rowsCount;

            var milestoneDateId = "m" + i + "Date" + rowsCount;

            var milestoneRowId = "m" + i + "RowId" + rowsCount;

            var paasingValues = "this," + i;

            var tableRow = '<tr>' +

                '<td><input type="text" class="form-control" id="' + milestoneRowId + '" /></td > ' +

                '<td>MileStone Name</td>' +

                '<td><input type="text" class="form-control" id="' + milestoneNameId + '" /></td > ' +

                '<td>MileStone Date</td> ' +

                '<td><input type="text" class="form-control sprintdatecls" id="' + milestoneDateId + '" /></td > ' +

                '<td><span class="ui-symb ui-icon-circle-plus" onclick="addTableRow(' + paasingValues + ')"></span> ' +

                    '<span class="ui-symb ui-icon-circle-minus" onclick="removeTableRow(this)"></span> </td >' +

                '</tr>';

            $(tableIdd).closest("tbody").append(tableRow);

            addDatePicker("sprintdatecls");

        }

        function RemoveSprint(sprintNo) {

            var sprintCount = $('#tabs >ul> li');

            var i = sprintCount.length - 1;

            var sprint = "Sprint " + sprintNo;

            var divId = "Sprint-" + sprintNo;

            var tableId = "table-" + sprintNo;

            var liPanel = "liPanel" + sprintNo;

            $('#' + liPanel).remove();

            $('#' + divId).remove();

            var existingRemoveId = "spanRemv-" + (sprintNo - 1);

            $('#' + existingRemoveId).show();

            $('#tabs').tabs('refresh');

        }

        function addDatePicker(txtClass) {

            $('.' + txtClass).datepicker({

                constrainInput: false,

                dateFormat: "mm/dd/yy"

            }).on("change", function () {

                if ($(this).val() == "NP")

                    return true;

                $(this).datepicker('option', 'dateFormat', 'mm/dd/yy');

                return true;

            });

        }

        function CreateExistingSprints() {

            var sprintData = JSON.parse($('#hdnSprintFill').val());

            var sprintNameArray = []

            $.each(sprintData, function (key, element) {

                if (sprintNameArray.indexOf(element.SprintName) == -1)

                    sprintNameArray.push(element.SprintName);

            });

            //var existingSprintJon = JSON.

            $.each(sprintNameArray, function (key, AgileSprintName) {

                var i = AgileSprintName.split(' ')[1];

                var sprint = "Sprint " + i;

                var liPanel = "liPanel" + i;

                var tabid = "Sprint-" + i;

                var tableId = "table-" + i;

                var phaeHref = '<li id="' + liPanel + '" ><a href="#' + tabid + '">' + sprint + '</a></li>';

                $('#phaselink').append(phaeHref);

                // divHtml = divHtml + '</div>';

                var sprintStartDateId = "s" + i + "SDate" + 1;

                var sprintEndDateId = "s" + i + "EDate" + 1;

                var sprintRowId = "s" + i + "RowId" + 1;

                var milestoneId = 1;

                var paasingValues = "this," + i;

                var tableStructue = '<div id="' + tabid + '" class = "sprintDivCls">' +

                    '<table class="sprinttableCls" id="' + tableId + '"><thead></thead>' +

                    '<tbody>';

                var tableRow = '';

                var tableStartDateRow = '';

                $.each(sprintData, function (key, agileSprintRow) {

                    if (agileSprintRow.SprintName == AgileSprintName) {

                        if (agileSprintRow.Category == "SprintDates") {

                            if (!agileSprintRow.SprintStartDate)

                                agileSprintRow.SprintStartDate = '';

                             if (!agileSprintRow.SprintEnddate)

                                agileSprintRow.SprintEnddate = '';

                            tableStartDateRow = '<tr>' +

                                '<td><input type="text" value="' + agileSprintRow.ID + '"   class="form-control" id="' + sprintRowId + '" /></td > ' +

                                '<td>StartDate</td>' +

                                '<td><input type="text" value="' + agileSprintRow.SprintStartDate + '" class="form-control sprintdatecls" id="' + sprintStartDateId + '" /></td > ' +

                                '<td>EndDate</td> ' +

                                '<td><input type="text" value="' + agileSprintRow.SprintEnddate + '" class="form-control sprintdatecls" id="' + sprintEndDateId + '" /></td ><td></td> ' +

                                '</tr>';

                        } else {

                            if (!agileSprintRow.MilStoneName)

                                agileSprintRow.MilStoneName = '';

                             if (!agileSprintRow.MilStoneDate)

                                agileSprintRow.MilStoneDate = '';

                            if (agileSprintRow.MilStoneName) {

                                var milestoneNameId = "m" + i + "Name" + milestoneId;

                                var milestoneDateId = "m" + i + "Date" + milestoneId;

                                var milestoneRowId = "m" + i + "RowId" + milestoneId;

                                tableRow = tableRow + '<tr>' +

                                    '<td><input type="text" value="' + agileSprintRow.ID + '"  class="form-control" id="' + milestoneRowId + '" /></td > ' +

                                    '<td>MileStone Name</td>' +

                                    '<td><input type="text"  value="' + agileSprintRow.MilStoneName + '"  class="form-control" id="' + milestoneNameId + '" /></td > ' +

                                    '<td>MileStone Date</td> ' +

                                    '<td><input type="text"  value="' + agileSprintRow.MilStoneDate + '"  class="form-control sprintdatecls" id="' + milestoneDateId + '" /></td > ' +

                                    '<td><span class="ui-symb ui-icon-circle-plus" onclick="addTableRow(' + paasingValues + ')"></span>  ' +

                                    '</td >' +

                                    '</tr>';

                                milestoneId = milestoneId + 1;

                            }

                        }

                    }

                });

                if (milestoneId == 1) {

                    var milestoneNameId = "m" + i + "Name" + milestoneId;

                                var milestoneDateId = "m" + i + "Date" + milestoneId;

                                var milestoneRowId = "m" + i + "RowId" + milestoneId;

                                tableRow = tableRow + '<tr>' +

                                    '<td><input type="text" value=""  class="form-control" id="' + milestoneRowId + '" /></td > ' +

                                    '<td>MileStone Name</td>' +

                                    '<td><input type="text"  value=""  class="form-control" id="' + milestoneNameId + '" /></td > ' +

                                    '<td>MileStone Date</td> ' +

                                    '<td><input type="text"  value=""  class="form-control sprintdatecls" id="' + milestoneDateId + '" /></td > ' +

                                    '<td><span class="ui-symb ui-icon-circle-plus" onclick="addTableRow(' + paasingValues + ')"></span>  ' +

                                    '</td >' +

                                    '</tr>';

                }

                tableStructue = tableStructue+tableStartDateRow + tableRow+'</tbody></table>' + '</div>';

                 

                        //$('#' + tabid).append(tableRow);

                $('#tabs').append(tableStructue);

               

            });

             $('#phaselink').append('<li style="float:right;"><a href="#tabs-8">SIS - Project Cost Management</a></li>');

            $('#tabs').tabs();

            addDatePicker("sprintdatecls");

        }

        // New Change added

        function CheckForRosterSection() {

            var isEditMode = $('#hdnProjectId').val();

            if (isEditMode)

                $('#rosterSection').show();

            else

                $('#rosterSection').hide();

        }

        function fileValidation() {

            var filePath = $('#resourceFileupload').val();

            // var filePath = fileInput.value;

            // Allowing file type

            var allowedExtensions = /(\.xls|\.xlsx)$/i;

            if (!filePath) {

                alert('Please select the excel roster file to upload.');

                return false;

            }

            if (!allowedExtensions.exec(filePath)) {

                alert('Please upload the filled excel roster template.');

                return false;

            }

            else {

                $('#loading').show();

            }

        }