在js代碼拼接dom對(duì)象到頁(yè)面上去的模板總結(jié)(必看)
每次在js代碼里面想動(dòng)態(tài)的拼個(gè)dom,然后append到頁(yè)面上,都是各種麻煩,
要是可以直接在jsp頁(yè)面弄個(gè)隱藏的model那是很好的,用js方法里面的clone方法也是很好的,還可以給不同部分set值。
為了以后簡(jiǎn)單點(diǎn),我就把模板擺著,方便后面用得著的時(shí)候,復(fù)制粘貼。
function fillDialog(dataArray) {
var target = $("#dialogTarget");
target.empty();
for (var i = 0; i < dataArray.length; i++) {
var label = $('<label class="control-label" style="width: auto; text-align: left;"></label>');
label.text("" + dataArray[i].channelName);
var input = $("<input type=\"text\"/>");
input.prop("name", "checkbox");
input.prop("type", "checkbox");
input.prop("value", dataArray[i].id);
if (dataArray[i].showInUserStatistic) {
input.prop("checked", "true");
}
label.prepend(input);
target.append(label);
}
}
var trs = "";
for (var i = 0; i < dataArray.length; i++) {
var branchBank = dataArray[i].branch;
var newUser = dataArray[i].newUserNum;
var netBoostUser = dataArray[i].netBoostUserNum;
var closeUser = dataArray[i].closeUserNum;
var activeUser = dataArray[i].activeUserNum;
var index = activeUser.indexOf(".");
if (index > 0) {
//去分行活躍用戶數(shù)的小數(shù)部分如:11.0 ---> 11
activeUser = activeUser.substring(0, index);
}
trs += "<tr><td title='" + branchBank + "'>" + branchBank + "</td>";
trs += "<td title='" + newUser + "'>" + newUser + "</td>";
trs += "<td title='" + netBoostUser + "'>" + netBoostUser + "</td>";
trs += "<td title='" + closeUser + "'>" + closeUser + "</td>";
trs += "<td title='" + activeUser + "'>" + activeUser + "</td>";
trs += "</tr>";
}
newList.append("<tbody>" + trs + "</tbody>");
tableChart.append(newList.show());
var $metric = $("#metric");
$metric.empty();
var optGroup0 = $("<optgroup label='常用指標(biāo)'>");
var optGroup1 = $("<optgroup label='不常用指標(biāo)'>");
var optGroup2 = $("<optgroup label='未分組指標(biāo)'>");
for(var i=0; i<allMetricSources.length; i++) {
var m = allMetricSources[i];
if( m != null && (m.type == stream_type || m.type == 2)){
var option = $("<option ></option>");
option.attr("value", m.metric);
option.attr("data_type", m.data_type);
option.attr("unit", m.unit);
option.html(m.title);
if (m.groupType == 0) {
optGroup0.append(option);
} else if (m.groupType == 1) {
optGroup1.append(option);
} else {
optGroup2.append(option);
}
}
}
$metric.append(optGroup0);
$metric.append(optGroup1);
$metric.append(optGroup2);
if(metric != undefined){
$metric.val(metric);
}
$metric.trigger("chosen:updated");
function fillRecoveryTable(data) {
var $tableBody = $("#recoveryTable").find("tbody");
$tableBody.empty();
var trs = "";
for (var i = 0; i < data.length; i++) {
var recovery = data[i];
trs += "<tr><td >" + recovery.fileName + "</td>";
trs += "<td >" + recovery.timeString + "</td>";
trs += "<td >" + (recovery.result ? "成功" : "失敗") + "</td>";
trs += "<td >" +
"<a onclick=\"removeRecovery('" + recovery.id + "');\" class=\"icon-trash option\" title=\"刪除\"></a>" +
"<a onclick=\"doRecovery('" + recovery.id + "');\" class=\"icon-cog option\" title=\"一鍵恢復(fù)\" ></a></td>";
trs += "</tr>";
}
$tableBody.append(trs);
}
以上這篇在js代碼拼接dom對(duì)象到頁(yè)面上去的模板總結(jié)(必看)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript入門(mén)之window對(duì)象【新手必看】
本文系統(tǒng)介紹了javascript的window對(duì)象以及一些控制函數(shù)的用法,僅供大家參考2016-11-11
解決前后端交互數(shù)據(jù)出現(xiàn)精度丟失的多種方式
這篇文章主要為大家介紹了解決前后端交互數(shù)據(jù)出現(xiàn)精度丟失的多種方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04
點(diǎn)擊提交按鈕后按鈕變灰色不可用狀態(tài)的三種方法
當(dāng)點(diǎn)擊提交后,提交按鈕變灰色不可用,這樣可有效防止重復(fù)提交,本代碼就是實(shí)現(xiàn)這樣一個(gè)功能2013-09-09
JavaScript通過(guò)RegExp使用正則表達(dá)式過(guò)程詳解
正則表達(dá)式用于定義一些字符串的規(guī)則。計(jì)算機(jī)可以根據(jù)正則表達(dá)式,來(lái)檢查一個(gè)字符串是否符合指定的規(guī)則,或者將字符串中符合規(guī)則的內(nèi)容提取出來(lái)。RegExp的意思是 Regular expression。使用typeof檢查正則對(duì)象,會(huì)返回object2023-03-03
JS解決?Array.fill()參數(shù)為對(duì)象指向同一個(gè)引用地址的問(wèn)題
這篇文章主要介紹了JS解決?Array.fill()參數(shù)為對(duì)象指向同一個(gè)引用地址問(wèn)題,解決方案使用map返回出不同的引用的地址,fill參數(shù)可隨意填寫(xiě)(不為空),主要是map函數(shù)中返回的數(shù)據(jù),需要的朋友可以參考下2023-02-02
javascript實(shí)現(xiàn)文字圖片上下滾動(dòng)的具體實(shí)例
這篇文章介紹了在JS中文字圖片上下滾動(dòng)的實(shí)現(xiàn)代碼,需要的朋友可以參考一下2013-06-06
JS正則表達(dá)式驗(yàn)證端口范圍(0-65535)
這篇文章主要介紹了JS正則表達(dá)式驗(yàn)證端口范圍(0-65535),文中給大家提到了Js正則表達(dá)式驗(yàn)證IP+端口號(hào)的代碼,需要的朋友可以參考下2020-01-01
JS取數(shù)字小數(shù)點(diǎn)后兩位或n位的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇JS取數(shù)字小數(shù)點(diǎn)后兩位或n位的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10

