关闭

在js代码拼接dom对象到页面上去的模板总结

1562人阅读 评论(0) 收藏 举报
分类:

每次在js代码里面想动态的拼个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) {
            //去分行活跃用户数的小数部分如: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);
}






1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    老铁们,支付宝扫一扫,领红包啦!
    扫一扫,红包是你的!对,你没看错,天天都有效,可以直接保存,天天扫,天天拿。不信?搞一哈,就造啦!!!
    个人资料
    • 访问:2063424次
    • 积分:18980
    • 等级:
    • 排名:第526名
    • 原创:323篇
    • 转载:79篇
    • 译文:4篇
    • 评论:1243条
    大 师 兄 说
    • 交流群:321964905(新建)
    • 我扣扣:1181415316
    • 我邮箱:cmshome@163.com
    • 我格言:"习惯就好"坑了多少人
    • 暂时在:帝都
    • 曾工作:成都
    • 我爱好:海贼王
    • 我爱好:英雄杀
    • 我家乡:济源市
    • 我爱好:写bug
    • 求求求:有问题就留言吧
    • 为啥呢:大师兄是一直在维护的
      你觉得本博文对你有用吗 有用,那就请点赞留言。 暂时没用,也请不要踩。
    博客专栏
    最新评论