单击按钮时如何创建 html 代码？
How to create html code when click button?
我的代码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-click) :
$scope.addHocKPIs = function () {
console.log("a");
}
我想要这样的东西：当我点击 addHocKPIs 按钮时，我应该重新创建 html 代码。
我是说，
你能帮帮我吗？
您可以使用追加和 html
jQuery append() 方法
<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>
检查 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>
我的代码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-click) :
$scope.addHocKPIs = function () {
console.log("a");
}
我想要这样的东西：当我点击 addHocKPIs 按钮时，我应该重新创建 html 代码。
我是说，
你能帮帮我吗？
您可以使用追加和 html jQuery append() 方法
<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>
检查 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>