![](/img/trans.png)
[英]Append html string as a table row (<tr>) via javascript-jquery
[英]HTML String via jQuery append
我想使用jQuery append生成以下HTML字符串。 手動編寫代碼對我來說太麻煩了。
<div>
<label>Name (Optional)</label>
<input type='text' class='form-control' id='job-name'/><br />
<label>Quick Schedule</label><br />
<a class="btn btn-primary" onclick="schedule = '@hourly'; job_string();">Hourly</a>
<a class="btn btn-primary" onclick="schedule = '@daily'; job_string();">Daily</a>
<a class="btn btn-primary" onclick="schedule = '@weekly'; job_string();">Weekly</a>
<a class="btn btn-primary" onclick="schedule = '@monthly'; job_string();">Monthly</a>
<a class="btn btn-primary" onclick="schedule = '@yearly'; job_string();">Yearly</a><br /><br />
<div class="row">
<div class="col-md-2">Minute</div>
<div class="col-md-2">Hour</div>
<div class="col-md-2">Day</div>
<div class="col-md-2">Month</div>
<div class="col-md-2">Week</div>
</div>
<div class="row">
<div class="col-md-2"><input type="text" class="form-control" id="job-minute" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-hour" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-day" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-month" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-week" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><a class="btn btn-primary" onclick="set_schedule();">Set</a></div>
</div>
</div>
例如,它應該寫成類似於下面的格式。
$('<div/>').append(
).append(
) ....
使用jQuery append創建上述HTML的最佳方法是什么? 這里的領導非常感謝。
您可以使用樹狀數據結構表示HTML。 完成后,您可以遍歷樹,並為每個節點創建相應的元素並將其附加到目標元素。
功能樣式編程似乎非常適合用最少量的代碼創建上述對象。 您可以使用函數組合抽象創建復雜結構。 此外,您可以使用數組和更高階函數(如map)批量創建元素。
為了讓您了解它是如何完成的,請考慮以下模型(接口)來表示節點(元素):
interface Node {
tag: string;
classNames: string[];
attrs: {
[key: string]: string;
};
eventHandlers: {
[key: string]: (...params: any[]) => any;
};
children: Node[];
textChildren: string[];
}
注意 :上面的類型定義是用Typescript編寫的。 顯然,您可以忽略類型並實現我在純JavaScript中描述的內容。
現在考慮以下標記:
<div class="row">
<div class="col-md-2"><input type="text" class="form-control" id="job-minute" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-hour" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-day" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-month" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-week" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><a class="btn btn-primary" onclick="set_schedule();">Set</a></div>
</div>
讓我們定義一些輔助函數,這樣我們就可以更容易地創建等效樹:
const createRow = (children) => ({
tag: "div",
classNames: ["row"],
attrs: {},
eventHandlers: {},
children,
textChildren: []
});
const createCol = (cls, children) => ({
tag: "div",
classNames: [cls],
attrs: {},
eventHandlers: {},
children,
textChildren: []
});
const createFormInput = (attrs, eventHandlers) => ({
tag: "input",
attrs,
classNames: ["form-control"],
eventHandlers,
children: [],
textChildren: []
});
const createFormInputTextInCol = id =>
createCol("col-md-2", [
createFormInput(
{
type: "text",
id,
value: "*"
},
{
click() {
this.select();
}
}
)
]);
const createAnchorButton = (text, eventHandlers) => ({
tag: "a",
attrs: {},
classNames: ["btn", "btn-primary"],
eventHandlers,
children: [],
textChildren: [text]
});
使用上面定義的函數,創建等效樹非常簡單:
const row = createRow([
...["job-minute", "job-hour", "job-day", "job-month", "job-week"].map(
createFormInputTextInCol
),
createCol("col-md-2", [
createAnchorButton("Set", {
click() {
// TODO: define set_schedule
// set_schedule();
}
})
])
]);
要將此對象轉換為(JQuery包裝)元素,您可以執行以下操作:
const toElement = node => {
const element = $(`<${node.tag}>`);
Object.keys(node.attrs).forEach(key => {
element.attr(key, node.attrs[key]);
});
element.addClass(node.classNames.join(" "));
Object.keys(node.eventHandlers).forEach(key => {
element.on(key, function(...args) {
node.eventHandlers[key].call(this, ...args);
});
});
node.textChildren.map(text => document.createTextNode(text)).forEach(e => element.append(e));
node.children.map(toElement).forEach(e => element.append(e));
return element;
};
$('<div />').append(toElement(row));
演示
const createRow = (children) => ({ tag: "div", classNames: ["row"], attrs: {}, eventHandlers: {}, children, textChildren: [] }); const createCol = (cls, children) => ({ tag: "div", classNames: [cls], attrs: {}, eventHandlers: {}, children, textChildren: [] }); const createFormInput = (attrs, eventHandlers) => ({ tag: "input", attrs, classNames: ["form-control"], eventHandlers, children: [], textChildren: [] }); const createFormInputTextInCol = id => createCol("col-md-2", [ createFormInput({ type: "text", id, value: "*" }, { click() { this.select(); } }) ]); const createAnchorButton = (text, eventHandlers) => ({ tag: "a", attrs: {}, classNames: ["btn", "btn-primary"], eventHandlers, children: [], textChildren: [text] }); const row = createRow([ ...["job-minute", "job-hour", "job-day", "job-month", "job-week"].map( createFormInputTextInCol ), createCol("col-md-2", [ createAnchorButton("Set", { click() { // TODO: define set_schedule // set_schedule(); } }) ]) ]); const toElement = node => { const element = $(`<${node.tag}>`); Object.keys(node.attrs).forEach(key => { element.attr(key, node.attrs[key]); }); element.addClass(node.classNames.join(" ")); Object.keys(node.eventHandlers).forEach(key => { element.on(key, function(...args) { node.eventHandlers[key].call(this, ...args); }); }); node.textChildren.map(text => document.createTextNode(text)).forEach(e => element.append(e)); node.children.map(toElement).forEach(e => element.append(e)); return element; }; $(document).ready(() => { const rowElement = toElement(row); $("#wrapper").html(rowElement); $("#outerHtml").text($("#wrapper").html()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <h2>Generated HTML</h2> <pre id="outerHtml"></pre> <h2>Appended Element</h2> <div id="wrapper"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.