jquery动态创建html

annan211

浏览: 463013 次
性别:
来自: 广州

最近访客更多访客>>

xinhezai

kannan22

qq234766237

zhenggm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

<!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>

分享到：

plupload 的使用 | input textarea 标题居中显示

2013-12-04 16:28
浏览 707
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery动态创建html

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery动态创建html

评论

发表评论

相关推荐

ajax 实现文件上传

百度词库联想

html 锚点跳转

js正则表达式 字符检测

ajax 加载有顺序依赖时，可以通过这个来设置AJAX的异步为同步

js 获取验证码倒计时

小悬浮窜口 div

jquery 禁止修改表单中的所有域

jquery 分页

jquery 自动补全方案

jquery 时间控件的调用

20个jquery 设计的倒计时demo 可参考

jQuery 15个精彩片段

JEECG 上传头像,图片并切割

最近访客更多访客>>

js正则表达式字符检测