`
caleb_520
  • 浏览: 250472 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

利用DOM静态更新列表

    博客分类:
  • Ajax
阅读更多
今天发表一遍利用DOM静态更新列表,现在就直接给出代码。
<%@ page language="java" pageEncoding="gb2312"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>品牌信息管理</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="images/css.css">
	
	<script type="text/javascript">
		function addSort() {
			var name = document.getElementById("name").value;
			if (name == "") {
				return;
			}
			var row = document.createElement("tr");
			row.setAttribute("id", name);
			var cell = document.createElement("td");
			cell.appendChild(document.createTextNode(name));
			row.appendChild(cell);
			
			//添加删除按钮
			var deleteButton = document.createElement("input");
			deleteButton.setAttribute("type", "button");
			deleteButton.setAttribute("value", "删除");
			deleteButton.onclick = function () {deleteSort(name)};
			cell = document.createElement("td");
			cell.appendChild(deleteButton);
			row.appendChild(cell);
			
			//将设置好的元素动态添加到tbody里面
			document.getElementById("sortList").appendChild(row);
			//添加完品牌后就清空输入框
			document.getElementById("name").value="";
		}
		
		//删除品牌信息
		function deleteSort(id) {
			if (id != null) {
				var row = document.getElementById(id);
				var sorlist = document.getElementById("sortlist");
				sorlist.removeChild(row);
			}
		}
	</script>
  </head>
  
  <body>
	 <table style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="2" width="400" bgcolor="#f5efe7" border="0">
		<tr>
			<td align="middle" height="4" colspan="3">
				<img height="4" src="images/promo_list_top.gif" width="100%" border="0" alt="">
			</td>
		</tr>
		<tr>
			<td align="middle" bgcolor="#dbc2b0" height="19" colspan="3">
				<b>品牌信息管理</b>
			</td>
		</tr>
		<tr>
			<td height="20">
				增加新品牌:
			</td>
			<td height="20">
				<input id="name" type="text" size="15">
			</td>
			<td height="20">
				<img src="images/ok.gif" onclick="addSort();" alt="">
			</td>
	
		</tr>
		<tr>
			<td height="20">
				品牌信息管理:
			</td>
	
		</tr>
		<table border="1" width="400">
			<tr>
				<td height="20" valign="top" align="center">
					品牌名称:
				</td>
				<td id="pos_1" height="20">
					操作
				</td>
			</tr>
			<tbody id="sortList"></tbody>
		</table>
	</table>
  </body>
</html>


下边是一个截图

  • 大小: 12.4 KB
分享到:
评论

相关推荐

    掌握Ajax系列4:利用DOM进行Web响应

    通过DOM,Web程序员可以从简单的静态HTML页面转变为构建复杂的、响应式的用户体验。在Ajax应用中,DOM扮演着不可或缺的角色,因为它允许JavaScript在后台获取数据并无缝地更新页面部分,提高了用户体验,减少了网络...

    domtoimage使用HTML5canvas从DOM节点生成图像

    1. **DOM(Document Object Model)**:DOM是HTML和XML文档的编程接口,它将文档表示为树形结构,允许程序和脚本动态更新、添加、删除和改变元素和属性。 2. **HTML5 Canvas**:HTML5中的Canvas元素是一个可绘制...

    jsdom.rar jsdom.chm

    jsdom就是基于Node.js的,利用其非阻塞I/O和事件驱动的特性来高效地处理DOM操作。 **DOM**: 文档对象模型 DOM是W3C标准,用于表示XML和HTML文档的一种编程接口。它将文档解析为一棵由节点构成的树形结构,每个节点...

    DOMscripting

    这本书详细介绍了如何利用DOMscripting技术来增强网页的交互性和功能。 在JavaScript中,DOM提供了对网页元素的全面控制,包括创建、查找、修改和删除元素。DOMscripting的核心理念是将静态HTML转化为动态、响应...

    xmldom.zip

    7. XMLDOM在微信小程序中的应用:在微信小程序中,通常会先通过`wx.request`获取XML数据,然后使用`DOMParser`解析XML字符串为DOM对象,接着就可以利用XMLDOM的方法处理数据,例如提取特定信息或更新小程序的显示...

    Uncaught DOMException:

    6. **使用Linting工具**:静态代码分析工具,如ESLint,可以帮助检测出潜在的问题,防止运行时出现DOMException。 在标签“源码”和“工具”的提示下,我们可以进一步探讨如何通过查看源代码来找出问题,或者使用...

    Auction(JSP中用Js进行dom操作ajax静态刷新案例代码).rar

    总之,这个案例展示了如何利用AJAX、JavaScript、DOM、Java和JSP技术构建一个动态的拍卖系统,实现了客户端与服务器之间的数据通信和页面的无刷新更新,提升了用户体验。对这些技术的深入理解和实践对于Web开发者来...

    虚拟DOM与diff算法.doc

    当数据发生变化时,不再需要遍历整个DOM树来寻找并更新对应的元素,而是改变虚拟DOM树的对应部分。虚拟DOM中的每个节点都是一个JS对象,包含了对应DOM元素的所有信息,如属性、样式等。这种表示方式允许我们快速比较...

    JSDOM编程艺术2源代码

    **JavaScript DOM编程艺术2源代码**是...通过阅读和实践提供的源代码,你可以深化对DOM的理解,提高JavaScript编程技能,并利用JSDOM在Node.js环境中实现更多可能性。记得在实践中不断探索,DOM的世界充满了无限可能。

    dom4j和源文件.rar

    《深入理解DOM4J:解析、操作与源码探索》 DOM4J是Java社区中广泛使用的XML处理库,它提供了强大的...通过深入了解DOM4J的使用、XPath支持以及源码分析,开发者可以更好地利用DOM4J解决实际问题,提升XML处理的效率。

    前端开源库-jsdom-papandreou

    4. **静态网站构建**:在构建静态网站时,可以利用 JSDOM 处理和预渲染动态内容。 5. **富文本编辑器**:在非浏览器环境中,JSDOM 可用于处理和验证富文本内容。 ### 使用 JSDOM 的注意事项 1. 性能问题:由于 JS...

    摇奖项目(dom4j解析xml随机抽取个人信息)

    标题中的“摇奖项目(dom4j解析xml随机抽取个人信息)”揭示了这是一个基于Java Web的摇奖系统,它利用DOM4J库来解析XML文件,从中随机选取用户信息进行抽奖。DOM4J是一个非常流行的Java XML API,它提供了丰富的...

    ajax生成静态页面

    在这个过程中,前端JavaScript通过Ajax调用获取服务器端的数据,然后利用这些数据动态创建HTML元素,并将其插入到DOM中。如果进一步地,可以将生成的HTML片段保存回服务器,这样就形成了一个静态页面,下次请求时...

    门户静态网站

    在【压缩包子文件的文件名称列表】中,我们看到“JavaScript门户网站”。这可能表示该静态网站的实现主要依赖JavaScript,这是一种广泛使用的客户端脚本语言,用于增强网页的交互性和动态效果。JavaScript可以用来...

    Js 静态分页 10种风格

    静态分页,虽然名字中有“静态”一词,但在Js中,它实际上是指在不重新加载整个页面的情况下,通过JavaScript代码来更新页面内容,显示不同的数据分页。以下是关于Js静态分页的10种风格及其相关知识点的详细介绍: ...

    js静态网店源码

    JavaScript可以利用JSON格式存储和管理商品信息,通过AJAX(异步JavaScript和XML)技术与服务器进行非阻塞的数据交换,实现商品的动态加载或更新。 ### 6. 购物车功能 静态网店源码中的购物车功能通常使用...

    dom4j 操作详解

    DOM4J 操作详解 DOM4J 是一个 Java 库,用于处理 XML 文档,它提供了灵活且高效的方式来解析、创建、修改 ...通过学习如何解析、遍历、查询、修改以及保存 XML 文档,你可以有效地利用 DOM4J 处理各种 XML 相关任务。

    dom4j 工具类 使用例子

    在这个"dom4j工具类使用例子"中,我们将深入探讨如何利用DOM4J进行XML处理。 首先,`Dom4jUtil.java`可能是包含DOM4J实用方法的类。这个类可能包括了创建、查询、修改XML文档的各种静态方法。例如,可能会有用于...

    静态网页-大学作业-简单的静态网页

    至于压缩包子文件的文件名称列表仅给出“静态网页”这一项,这意味着压缩包可能包含所有静态网页相关文件,如HTML、CSS、JavaScript、图片和其他资源文件。在实际项目中,这些文件通常会按照一定的目录结构组织,...

    JS静态评论

    JS静态评论系统是利用JavaScript实现的一种用户互动功能,允许访客在网页上留下他们的反馈、建议或者讨论。这种系统通常不需要服务器端的交互,而是直接在客户端处理和展示评论,从而提高了网页的响应速度和用户体验...

Global site tag (gtag.js) - Google Analytics