![](/img/trans.png)
[英]Using bootstrap, jquery and javascript to create a dynamic homepage
[英]how to create a bootstrap card using jquery/javascript?
我在 HTML 中创建并定义了一张卡。 我想在 HTML 中摆脱它,因此使用 jquery/javascript 创建相同的卡,这样可以在单击按钮时创建一个新卡。
<div id="divEntryPanel" class ="col-sm-6" style="display:none">
<div class="card aircat-card-border">
<div class="card-header bg-info">
<h5 style="font-weight: bold">Additional Entry</h5>
</div>
<div id="pnlEntry" class="bg-secondary">
<div class="pt-2 form-group">
<asp:Label CssClass="row pl-3" runat="server" Text="Intended Action: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea1" runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="Intended completion date: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea2" runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="extra details: ">
<asp:Label CssClass="text-dark small" runat="server" Text="(200 Character Limit )"></asp:Label>
</asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea3" runat="server" cols="50" rows="2" maxlength="200"></textarea>
<div id="EntrySaveBtn" class="col-md-12 float-right">
<asp:Label runat="server" Text="Click to save the entry to this alert:"></asp:Label>
<a id="btnSaveEntry" class="btn btn-success btn-sm ml-2">Save</a>
</div>
</div>
</div>
</div>
</div>
像这样的东西应该工作。 在您的 HTML 中:
<div id="divEntryPanel" class ="col-sm-6" style="display:none">
</div>
<button id="myBtn">Click me</button>
在你的 javascript
const card = `
<div class="card aircat-card-border">
<div class="card-header bg-info">
<h5 style="font-weight: bold">Additional Entry</h5>
</div>
<div id="pnlEntry" class="bg-secondary">
<div class="pt-2 form-group">
<asp:Label CssClass="row pl-3" runat="server" Text="Intended Action: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea1"
runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="Intended completion date: "></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea2"
runat="server" cols="50" rows="2" maxlength="2000"></textarea>
<asp:Label CssClass="row pl-3" runat="server" Text="extra details: ">
<asp:Label CssClass="text-dark small" runat="server" Text="(200 Character Limit )">
</asp:Label></asp:Label>
<textarea style="width: 100%;" class="form-control form-control-sm" id="Textarea3"
runat="server" cols="50" rows="2" maxlength="200"></textarea>
<div id="EntrySaveBtn" class="col-md-12 float-right">
<asp:Label runat="server" Text="Click to save the entry to this alert:"></asp:Label>
<a id="btnSaveEntry" class="btn btn-success btn-sm ml-2">Save</a>
</div>
</div>
</div>
</div>
`
const button = document.getElementById("myBtn")
const mainDiv = document.getElementById("divEntryPanel")
button.onclick = function () {
mainDiv.innerHTML += card
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.