jquery动态创建html

最新推荐文章于 2024-10-02 05:39:15 发布

annan211

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量99

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/annan211/article/details/84509453

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <style>
            .pageList{ font-size:12px; font-family:宋体; background: #ffffff; border-top:1px
            solid #aaa; } .pageList tr{ text-align: left; height: 24px; } .pageList
            tr td{ padding-left: 5px; padding-right: 5px; white-space:nowrap; } /*奇数行*/
            .odd { background: #ffffe0; } /*偶数行*/ .even { background: #FFFFFF; } .pageList
            .thehead{ text-align:center; border-top:1px solid #fff; border-left:1px
            solid #fff; border-right:1px solid #ccc; border-bottom:1px solid #ccc;
            background:#eee;color:#000; } .pageList .thetd{ border-right:1px solid
            #ccc; border-bottom:1px solid #ccc; }
        </style>
<title>SVN权限管理小系统</title>
<script src="common/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<head>
<script type="text/javascript" charset="utf-8">
$(function() {
	$.ajax({
		url : 'ws/role',
		type : 'GET',
		success : function(msg) {
			for (var i = 0; i < msg.length; i++) {
            //创建行
            var tr = document.createElement("tr");
            //给奇偶行添加样式
            if (i % 2 == 0) tr.setAttribute("class", "even");
            else tr.setAttribute("class", "odd");
            //创建列
            var td0 = document.createElement("td");
            //给列添加样式
            td0.setAttribute("class", "thehead");
            //序号
            var va2 = document.createTextNode(i + 1);
            td0.appendChild(va2);
            tr.appendChild(td0);
//             //创建名称列
            var td2 = document.createElement("td");
            td2.setAttribute("class", "thetd");
            var name2 = document.createTextNode(msg[i].name);
            var a = $("<a>");
            a.attr("href","javascript:void(0);");
            a.text(msg[i].name);
            var id = msg[i].id;
			$(a).attr("id",id);
            $(a).click(function(){
          		$.ajax({
          			url : 'ws/role/'+$(this).attr("id"),
          			type : 'GET',
          			success : function(response) {
          				PopIt("查看角色",'角色名称：'+response.name+'-角色权限：'+response.permission,'<#ZC_BLOG_HOST#>');
          			}
          		});
             });
            td2.appendChild(a[0]);
            tr.appendChild(td2);


            var td4 = document.createElement("td");
            td4.setAttribute("class", "thetd");
            var r = msg[i].permission;

            var time = document.createTextNode(r);
            td4.appendChild(time);
            tr.appendChild(td4);

            var td5 = document.createElement("td");
            td5.setAttribute("class", "thetd");


            var dele = $("<a>");
            dele.attr("href","javascript:void(0);");
            dele.text("删除 |");
            var deleid = msg[i].id;
            $(dele).attr("deleid",deleid);
            $(dele).click(function(){
          		$.ajax({
          			url : 'ws/role/'+$(this).attr("deleid"),
          			type : 'DELETE',
          			success : function(response) {
          				alert("删除成功");
          			}
          		});
             });
            td5.appendChild(dele[0]);

            var update = $("<a>");
            update.attr("href","javascript:void(0);");
            var updateid = msg[i].id;
            $(update).attr("updateid",updateid);
            update.text("修改 |");
            $(update).click(function(){
            	$.ajax({
          			url : 'ws/role/'+$(this).attr("updateid"),
          			type : 'GET',
          			success : function(response) {
          				// 修改当前角色相关信息
          				Update("修改角色",'角色名称：'+response.name+'-角色权限：'+response.permission,'<#ZC_BLOG_HOST#>');
          			}
          		});
             });

            td5.appendChild(update[0]);

            var add = $("<a>");
            add.attr("href","javascript:void();");
            add.text("添加用户 ");
            $(add).click(function(){
					// 给当前角色添加 用户

             });
            td5.appendChild(add[0]);

            tr.appendChild(td5);
            document.getElementById("noteList").appendChild(tr);;
        }
		}
	});
});

function PopIt(label, msg, URLE){
    // Set up Page Colors & Table
    var DQUOTE = '\"'
    var s1 =     "<TITLE>" + label + "</TITLE>" +
    "<BODY BGCOLOR='ffffff'><TABLE BORDER=0><TR>" +
    "<TD WIDTH=90% HEIGHT=90 VALIGN=TOP ALIGN=LEFT>"+
    "<FONT SIZE=4>"
    var s2 = "<FONT COLOR='FF0000'><B>"+""+"</B></FONT>"
    var s3 = "</TD><TD WIDTH=10%> </TD></TR><TR><TD> </TD>"+
    "<TD VALIGN=TOP ALIGN=RIGHT>"+
    "<FORM><INPUT TYPE='BUTTON' VALUE='Close'" +
    "onClick='self.close()'>"  +
    "<INPUT TYPE='BUTTON' VALUE=''" +
    "onClick='window.open("+DQUOTE+URLE+DQUOTE+")'"  +
    "</FORM></TD></TR></TABLE></BODY>"
    popup = window.open("","popDialog","height=200,width=300,scrollbars=no")
    popup.document.write(s1+s2+msg+s3)
    popup.document.close()
}

function Update(label, msg, URLE){
    // Set up Page Colors & Table
    var DQUOTE = '\"'
    var s1 =     "<TITLE>" + label + "</TITLE>" +
    "<BODY BGCOLOR='ffffff'><TABLE BORDER=0><TR>" +
    "<TD WIDTH=90% HEIGHT=90 VALIGN=TOP ALIGN=LEFT>"+
    "<FONT SIZE=4>"
    var s2 = "<FONT COLOR='FF0000'><B>"+""+"</B></FONT>"
    var s3 = "</TD><TD WIDTH=10%> </TD></TR><TR><TD> </TD>"+
    "<TD VALIGN=TOP ALIGN=RIGHT>"+
    "<FORM><INPUT TYPE='BUTTON' VALUE='Close'" +
    "onClick='self.close()'>"  +
    "<INPUT TYPE='BUTTON' VALUE=''" +
    "onClick='window.open("+DQUOTE+URLE+DQUOTE+")'"  +
    "</FORM></TD></TR></TABLE></BODY>"
    popup = window.open("","popDialog2","height=200,width=300,scrollbars=no")
    popup.document.write(s1+s2+msg+s3)
    popup.document.close()
}
</script>
</head>
<body>
	<div style="overflow: auto;height:500px;">
            <table class="pageList" cellspacing="0" style="width:98%;">
                <thead>
                    <tr>
                        <td width="10%" class="thehead">序号</td>
                        <td align="center" width="30%" class="thehead">角色名称</td>
                        <td width="30%" class="thehead" align="center">角色权限</td>
                        <td width="10%" class="thehead">操作</td>
                    </tr>
                </thead>
                <tbody id="noteList">
                </tbody>
            </table>
        </div>
</body>
</html>