在js代碼拼接dom對象到頁面上去的模板總結(必看)
更新時間:2017年02月14日 12:00:57 投稿:jingxian
下面小編就為大家?guī)硪黄趈s代碼拼接dom對象到頁面上去的模板總結(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
每次在js代碼里面想動態(tài)的拼個dom,然后append到頁面上,都是各種麻煩,
要是可以直接在jsp頁面弄個隱藏的model那是很好的,用js方法里面的clone方法也是很好的,還可以給不同部分set值。
為了以后簡單點,我就把模板擺著,方便后面用得著的時候,復制粘貼。
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='常用指標'>"); var optGroup1 = $("<optgroup label='不常用指標'>"); var optGroup2 = $("<optgroup label='未分組指標'>"); 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=\"一鍵恢復\" ></a></td>"; trs += "</tr>"; } $tableBody.append(trs); }
以上這篇在js代碼拼接dom對象到頁面上去的模板總結(必看)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
解決前后端交互數(shù)據出現(xiàn)精度丟失的多種方式
這篇文章主要為大家介紹了解決前后端交互數(shù)據出現(xiàn)精度丟失的多種方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-04-04JS解決?Array.fill()參數(shù)為對象指向同一個引用地址的問題
這篇文章主要介紹了JS解決?Array.fill()參數(shù)為對象指向同一個引用地址問題,解決方案使用map返回出不同的引用的地址,fill參數(shù)可隨意填寫(不為空),主要是map函數(shù)中返回的數(shù)據,需要的朋友可以參考下2023-02-02javascript實現(xiàn)文字圖片上下滾動的具體實例
這篇文章介紹了在JS中文字圖片上下滾動的實現(xiàn)代碼,需要的朋友可以參考一下2013-06-06