如何在點擊按鈕時創建html代碼？

我的代碼的html代碼如下所示：如何在點擊按鈕時創建html代碼？

<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>

，我有一個按鈕。像這樣的代碼：

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

，這是我的.js代碼（NG-點擊）：

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

我想是這樣的：當我點擊addHocKPIs按鈕，我應該創建HTML代碼再次。

我的意思是，

你能幫助我嗎？

來源

2017-06-14 eagle

檢查plnkr。

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>

來源

2017-06-14 06:51:15 user8158361

讓代碼只有答案是不鼓勵的。嘗試向您添加和更新的代碼提供一些解釋。 – John

@John，感謝您的反饋。我會提供解釋。謝謝。 – user8158361

沒問題，順便也歡迎堆棧溢出！ – John

-1

可以使用附加和HTML jQuery的追加的完整代碼（）方法

<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>

來源

2017-06-14 06:03:22 shammidevd

對不起，我downvoted，因爲我認爲這是愚蠢的，提供一個jQuery的問題的答案標記的角度。 – ippi

我只知道jquery – shammidevd

如何在點擊按鈕時創建html代碼？

回答

相關問題