Every time I want to dynamically spell a dom in the js code and then append it to the page, it is all kinds of trouble.
It would be great if you could directly create a hidden model on the jsp page. It would be great if you could use the clone method in the js method, and you could also give different set values.
To make it simpler in the future, I put the template in order to make it easier to copy and paste it when it is available later.
function fillDialog(dataArray) { var target = $("#dialogTarget"); (); for (var i = 0; i < ; i++) { var label = $('<label class="control-label" style="width: auto; text-align: left;"></label>'); ("" + dataArray[i].channelName); var input = $("<input type=\"text\"/>"); ("name", "checkbox"); ("type", "checkbox"); ("value", dataArray[i].id); if (dataArray[i].showInUserStatistic) { ("checked", "true"); } (input); (label); } }
var trs = ""; for (var i = 0; i < ; 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 = ("."); if (index > 0) { //The decimal part of the number of active users in the branch is as follows: 11.0 ---> 11 activeUser = (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>"; } ("<tbody>" + trs + "</tbody>"); (()); var $metric = $("#metric"); $(); var optGroup0 = $("<optgroup label='Frequently used indicators'>"); var optGroup1 = $("<optgroup label='Not commonly used indicators'>"); var optGroup2 = $("<optgroup label='Ungrouped metrics'>"); for(var i=0; i<; i++) { var m = allMetricSources[i]; if( m != null && ( == stream_type || == 2)){ var option = $("<option ></option>"); ("value", ); ("data_type", m.data_type); ("unit", ); (); if ( == 0) { (option); } else if ( == 1) { (option); } else { (option); } } } $(optGroup0); $(optGroup1); $(optGroup2); if(metric != undefined){ $(metric); } $("chosen:updated"); function fillRecoveryTable(data) { var $tableBody = $("#recoveryTable").find("tbody"); $(); var trs = ""; for (var i = 0; i < ; i++) { var recovery = data[i]; trs += "<tr><td >" + + "</td>"; trs += "<td >" + + "</td>"; trs += "<td >" + ( ? "success" : "fail") + "</td>"; trs += "<td >" + "<a onclick=\"removeRecovery('" + + "');\" class=\"icon-trash option\" title=\"delete\"></a>" + "<a onclick=\"doRecovery('" + + "');\" class=\"icon-cog option\" title=\"One-click recovery\" ></a></td>"; trs += "</tr>"; } $(trs); }
The above template summary of the js code splicing dom objects on the page (must read) is all the content I share with you. I hope you can give you a reference and I hope you can support me more.