`
annan211
  • 浏览: 459424 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery动态创建html

 
阅读更多 
<!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>
分享到：
| input textarea 标题居中显示
评论
发表评论

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

相关推荐

    jQuery动态创建html元素的常用方法汇总

    本文实例讲述了jQuery动态创建html元素的常用方法，在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下： 一般来说，可以通过以下几种方式动态创建html元素： 1、使用jQuery创建元素的...

    javascript与jquery动态创建html元素示例

    ### JavaScript与jQuery动态创建HTML元素知识点解析 在现代网页设计和开发中，动态地创建HTML元素是一项非常重要的技能。JavaScript和jQuery作为前端开发中不可或缺的技术，都提供了动态创建和操作DOM元素的方法。...

    jQuery动态创建表格生成器代码.zip

    "jQuery动态创建表格生成器代码"的核心在于，它提供了一个无需手动编写HTML代码的便捷方式，可以轻松地添加行（row）和列（column）。这通常涉及到以下几个关键步骤： 1. **初始化表格结构**：在网页中创建一个基本...

    jquery 动态创建表格单元随机色

    首先，我们需要理解 jQuery 如何动态创建 HTML 元素。在 jQuery 中，可以使用 `append()`、`prepend()` 或 `html()` 方法来添加或修改元素。例如，创建一个表格（table）和表格行（tr）以及表格单元格（td）的代码...

    jQuery动态添加删除编辑标签代码.zip

    通过jQuery，开发者可以轻松实现动态创建、删除和编辑这些标签，提高用户体验。 1. **动态添加选项卡**：这个功能允许用户在运行时创建新的选项卡。这通常涉及监听某个按钮的点击事件，然后在DOM（文档对象模型）中...

    jquery实现动态生成表格

    数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。

    Jquery创建动态表格

    使用jQuery，我们可以动态创建表格元素。例如，创建一个带有表头的表格： ```javascript var table = $('&lt;table&gt;&lt;/table&gt;'); var thead = $('&lt;thead&gt;&lt;/thead&gt;'); var tr = $('&lt;tr&gt;&lt;/tr&gt;'); // 添加表头...

    Jquery动态按钮

    "Jquery动态按钮"是一个利用jQuery库来创建具有动态效果的按钮，如动态影子、反光和镜子效果。这些效果能够提升用户的交互体验，使网页元素更具吸引力。 首先，我们来详细了解如何使用jQuery来创建动态按钮。基本...

    jQuery为动态生成的select元素添加事件的方法

    接着，通过`getVoucherGroupData`函数发起Ajax请求获取数据，并动态创建select元素的HTML内容。这里的关键是`getVoucherGroupData`函数中使用的`.html()`方法，它负责将生成的select元素的HTML添加到`...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素，特别是DIV和Table，并且处理其中的数据。这在Web开发中非常常见，尤其是在构建交互式用户界面时。下面将详细阐述这...

    jQuery如何获取动态添加的元素

    　用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。 二、解决方法 　度娘推荐的方法基本是用live()方法 　live()的官方定义和用法: 　live() 方法为...

    jQuery动态网页交互设计

    《jQuery动态网页交互设计》 在当今的网页开发领域，jQuery以其简洁的API和强大的功能，成为了前端开发者不可或缺的工具之一。本项目专注于利用jQuery来实现动态网页交互设计，旨在帮助学习者掌握如何通过jQuery...

    jquery动态添加删除(tr/td)

    在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...

    jquery动态生成树

    本示例代码“jquery动态生成树”是关于如何利用jQuery和相关技术，如Struts2、treeview插件及JSON数据格式，来动态地在网页上构建一个可交互的目录树结构。 首先，让我们详细了解一下每个组件的作用： 1. **jQuery...

    Jquery 右键菜单插件、css样式

    3. 创建自定义菜单：使用 jQuery 动态创建 HTML 元素，构建出一个包含多个菜单项的 div 或 ul 结构。 4. 绑定菜单项的点击事件：每个菜单项都可能有自己的点击事件处理函数，用于执行相应的操作。 5. 显示和隐藏菜单...

    jQuery文件夹创建删除修改代码.zip

    "jQuery文件夹创建删除修改代码.zip"是一个包含示例代码的压缩包，它着重展示了如何利用jQuery来实现文件夹管理的基本操作，如创建、删除和修改。这个功能通常用于提升Web应用程序的用户界面体验，特别是那些需要...

    HTML5 3D炫酷书架画册动态展示jQuery插件.rar

    这个“HTML5 3D炫酷书架画册动态展示jQuery插件”是一个利用HTML5、CSS3以及JavaScript（特别是jQuery库）构建的高级功能组件，旨在为用户带来一种全新的、生动的图片浏览体验，类似于真实的3D书架翻书效果。...

Magicbox
Global site tag (gtag.js) - Google Analytics