How to create html code when click button?

Question

My code html code as the following :

<comp:Tab runat="server" ID="AddhocKPIs" ClientIDMode="Static" name="AddhocKPIs" label="Add Ad hoc KPI">
                            <table class="kpi-editor-layout">
                                <tr>
                                    <td class="layout-column" style="border: 1px solid #eeeeee;">
                                        <table class="table table-striped">
                                            <tbody>
                                                <tr style="display: table-row"></tr>
                                                <tr style="display: table-row">
                                                    <th>KPI Name</th>
                                                    <td class="sep">:</td>
                                                    <td>
                                                        <input type="text" class="form-control" id="" maxlength="30" />
                                                    </td>
                                                </tr>
                                                <tr style="display: table-row">
                                                    <th>KPI Type</th>
                                                    <td class="sep">:</td>
                                                    <td>
                                                        <select class="form-control" id="">
                                                            <option value="0">Numeric</option>
                                                            <option value="1">Percentage</option>
                                                            <option value="2">NonNumeric</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr style="display: table-row">
                                                    <th>Precision</th>
                                                    <td class="sep">:</td>
                                                    <td>
                                                        <input type="text" class="form-control" id="" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                    <td class="layout-column" style="border: 1px solid #eeeeee;">
                                        <table class="table table-striped">
                                            <tbody>
                                                <tr style="display: table-row"></tr>
                                                <tr>
                                                    <th>QRY</th>
                                                    <td class="sep">:</td>
                                                    <td title="Query">
                                                        <select class="form-control" id="PmTabQueries">
                                                            <option value="{{QRY.Name}}" ng-repeat="QRY in PmTabQueries">{{QRY.Name}} ({{QRY.QRY}})</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="formula" colspan="3">
                                                        <div id="" class="FormulaEditor">
                                                            <div class="head form-inline" style="margin-bottom: 5px;">
                                                                <input type="text" placeholder="search" class="ui-autocomplete-input form-control clearfix" autocomplete="off" style="width: calc(100% - 45px);" />
                                                                <button title="Zoom In" id="zoomIn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only zoomInOut" role="button" ng-click="zoomInOutQRY()">
                                                                    <span class="ui-button-icon-primary ui-icon ui-icon-zoomin"></span>
                                                                    <span class="ui-button-text">Zoom In</span>
                                                                </button>
                                                                <button title="Zoom Out" id="zoomOut" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only zoomInOut" role="button" ng-click="zoomInOutQRY()">
                                                                    <span class="ui-button-icon-primary ui-icon ui-icon-zoomout"></span>
                                                                    <span class="ui-button-text">Zoom Out</span>
                                                                </button>
                                                                <div class="body" id="formulaContainer">
                                                                </div>
                                                            </div>
                                                            <div class="body">
                                                                <iframe class="ui-widget-content formula" frameborder="0"></iframe>
                                                                <iframe class="ui-widget-content formula-complete-popup" frameborder="0" style="display: none;"></iframe>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </comp:Tab>

and I have a button. Code like this :

<button id="UxAddHocKPIs" class="ui-state-default inlineIconAddHoc" ng-click="addHocKPIs()">
                <span class="ui-button-text">Add new Ad hoc KPI</span>
            </button>

and this is my .js code (ng-click) :

$scope.addHocKPIs = function () {
                    console.log("a");
                }

I want to something like this: When I click addHocKPIs button, I should create html code again.

I mean,

Can you help me please ?

user8158361 · Accepted Answer · 2017-06-14 06:59:08Z

Check plnkr for complete code.

 var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.current = 0;
  $scope.addHocKPIs = function () {
                    $scope.repeatTable.push('test'+$scope.current+1);
                };

  $scope.repeatTable= [];
   $scope.repeatTable.push('test'+$scope.current+1);
});

HTML:

<table class="kpi-editor-layout" ng-repeat="tab in repeatTable track by $index">
                                <tr>
                                    <td class="layout-column" style="border: 1px solid #eeeeee;">
                                        <table class="table table-striped">
                                            <tbody>
                                                <tr style="display: table-row"></tr>
                                                <tr style="display: table-row">
                                                    <th>KPI Name</th>
                                                    <td class="sep">:</td>
                                                    <td>
                                                        <input type="text" class="form-control" id="" maxlength="30" />
                                                    </td>
                                                </tr>
                                                <tr style="display: table-row">
                                                    <th>KPI Type</th>
                                                    <td class="sep">:</td>
                                                    <td>
                                                        <select class="form-control" id="">
                                                            <option value="0">Numeric</option>
                                                            <option value="1">Percentage</option>
                                                            <option value="2">NonNumeric</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr style="display: table-row">
                                                    <th>Precision</th>
                                                    <td class="sep">:</td>
                                                    <td>
                                                        <input type="text" class="form-control" id="" />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                    <td class="layout-column" style="border: 1px solid #eeeeee;">
                                        <table class="table table-striped">
                                            <tbody>
                                                <tr style="display: table-row"></tr>
                                                <tr>
                                                    <th>QRY</th>
                                                    <td class="sep">:</td>
                                                    <td title="Query">
                                                        <select class="form-control" id="PmTabQueries">
                                                            <option value="{{QRY.Name}}" ng-repeat="QRY in PmTabQueries">{{QRY.Name}} ({{QRY.QRY}})</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="formula" colspan="3">
                                                        <div id="" class="FormulaEditor">
                                                            <div class="head form-inline" style="margin-bottom: 5px;">
                                                                <input type="text" placeholder="search" class="ui-autocomplete-input form-control clearfix" autocomplete="off" style="width: calc(100% - 45px);" />
                                                                <button title="Zoom In" id="zoomIn" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only zoomInOut" role="button" ng-click="zoomInOutQRY()">
                                                                    <span class="ui-button-icon-primary ui-icon ui-icon-zoomin"></span>
                                                                    <span class="ui-button-text">Zoom In</span>
                                                                </button>
                                                                <button title="Zoom Out" id="zoomOut" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only zoomInOut" role="button" ng-click="zoomInOutQRY()">
                                                                    <span class="ui-button-icon-primary ui-icon ui-icon-zoomout"></span>
                                                                    <span class="ui-button-text">Zoom Out</span>
                                                                </button>
                                                                <div class="body" id="formulaContainer">
                                                                </div>
                                                            </div>
                                                            <div class="body">
                                                                <iframe class="ui-widget-content formula" frameborder="0"></iframe>
                                                                <iframe class="ui-widget-content formula-complete-popup" frameborder="0" style="display: none;"></iframe>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </table>

It is discouraged to have code only answers. Try providing some explanation to the code you added and updated.
@John, I appreciate for your feedback. I will provide explanation. Thanks.

Shammi Singh · Accepted Answer · 2017-06-14 06:03:22Z

-1

you can use append and html jQuery append() Method

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btnID").click(function(){
        $("#divID").append(" <div>Appended HTML</div>.");
    });

});
</script>

answered Jun 14, 2017 at 6:03

Shammi Singh

3771 silver badge5 bronze badges

2 Comments

ippi Over a year ago

Sorry, I downvoted because I thought it was silly to provide a jQuery-answer to a question tagged angular.

Shammi Singh Over a year ago

i know only jquery

Collectives™ on Stack Overflow

How to create html code when click button?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related