今天发表一遍利用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
分享到:
相关推荐
通过DOM,Web程序员可以从简单的静态HTML页面转变为构建复杂的、响应式的用户体验。在Ajax应用中,DOM扮演着不可或缺的角色,因为它允许JavaScript在后台获取数据并无缝地更新页面部分,提高了用户体验,减少了网络...
1. **DOM(Document Object Model)**:DOM是HTML和XML文档的编程接口,它将文档表示为树形结构,允许程序和脚本动态更新、添加、删除和改变元素和属性。 2. **HTML5 Canvas**:HTML5中的Canvas元素是一个可绘制...
jsdom就是基于Node.js的,利用其非阻塞I/O和事件驱动的特性来高效地处理DOM操作。 **DOM**: 文档对象模型 DOM是W3C标准,用于表示XML和HTML文档的一种编程接口。它将文档解析为一棵由节点构成的树形结构,每个节点...
这本书详细介绍了如何利用DOMscripting技术来增强网页的交互性和功能。 在JavaScript中,DOM提供了对网页元素的全面控制,包括创建、查找、修改和删除元素。DOMscripting的核心理念是将静态HTML转化为动态、响应...
7. XMLDOM在微信小程序中的应用:在微信小程序中,通常会先通过`wx.request`获取XML数据,然后使用`DOMParser`解析XML字符串为DOM对象,接着就可以利用XMLDOM的方法处理数据,例如提取特定信息或更新小程序的显示...
6. **使用Linting工具**:静态代码分析工具,如ESLint,可以帮助检测出潜在的问题,防止运行时出现DOMException。 在标签“源码”和“工具”的提示下,我们可以进一步探讨如何通过查看源代码来找出问题,或者使用...
总之,这个案例展示了如何利用AJAX、JavaScript、DOM、Java和JSP技术构建一个动态的拍卖系统,实现了客户端与服务器之间的数据通信和页面的无刷新更新,提升了用户体验。对这些技术的深入理解和实践对于Web开发者来...
当数据发生变化时,不再需要遍历整个DOM树来寻找并更新对应的元素,而是改变虚拟DOM树的对应部分。虚拟DOM中的每个节点都是一个JS对象,包含了对应DOM元素的所有信息,如属性、样式等。这种表示方式允许我们快速比较...
**JavaScript DOM编程艺术2源代码**是...通过阅读和实践提供的源代码,你可以深化对DOM的理解,提高JavaScript编程技能,并利用JSDOM在Node.js环境中实现更多可能性。记得在实践中不断探索,DOM的世界充满了无限可能。
《深入理解DOM4J:解析、操作与源码探索》 DOM4J是Java社区中广泛使用的XML处理库,它提供了强大的...通过深入了解DOM4J的使用、XPath支持以及源码分析,开发者可以更好地利用DOM4J解决实际问题,提升XML处理的效率。
4. **静态网站构建**:在构建静态网站时,可以利用 JSDOM 处理和预渲染动态内容。 5. **富文本编辑器**:在非浏览器环境中,JSDOM 可用于处理和验证富文本内容。 ### 使用 JSDOM 的注意事项 1. 性能问题:由于 JS...
标题中的“摇奖项目(dom4j解析xml随机抽取个人信息)”揭示了这是一个基于Java Web的摇奖系统,它利用DOM4J库来解析XML文件,从中随机选取用户信息进行抽奖。DOM4J是一个非常流行的Java XML API,它提供了丰富的...
在这个过程中,前端JavaScript通过Ajax调用获取服务器端的数据,然后利用这些数据动态创建HTML元素,并将其插入到DOM中。如果进一步地,可以将生成的HTML片段保存回服务器,这样就形成了一个静态页面,下次请求时...
在【压缩包子文件的文件名称列表】中,我们看到“JavaScript门户网站”。这可能表示该静态网站的实现主要依赖JavaScript,这是一种广泛使用的客户端脚本语言,用于增强网页的交互性和动态效果。JavaScript可以用来...
静态分页,虽然名字中有“静态”一词,但在Js中,它实际上是指在不重新加载整个页面的情况下,通过JavaScript代码来更新页面内容,显示不同的数据分页。以下是关于Js静态分页的10种风格及其相关知识点的详细介绍: ...
JavaScript可以利用JSON格式存储和管理商品信息,通过AJAX(异步JavaScript和XML)技术与服务器进行非阻塞的数据交换,实现商品的动态加载或更新。 ### 6. 购物车功能 静态网店源码中的购物车功能通常使用...
DOM4J 操作详解 DOM4J 是一个 Java 库,用于处理 XML 文档,它提供了灵活且高效的方式来解析、创建、修改 ...通过学习如何解析、遍历、查询、修改以及保存 XML 文档,你可以有效地利用 DOM4J 处理各种 XML 相关任务。
在这个"dom4j工具类使用例子"中,我们将深入探讨如何利用DOM4J进行XML处理。 首先,`Dom4jUtil.java`可能是包含DOM4J实用方法的类。这个类可能包括了创建、查询、修改XML文档的各种静态方法。例如,可能会有用于...
至于压缩包子文件的文件名称列表仅给出“静态网页”这一项,这意味着压缩包可能包含所有静态网页相关文件,如HTML、CSS、JavaScript、图片和其他资源文件。在实际项目中,这些文件通常会按照一定的目录结构组织,...
JS静态评论系统是利用JavaScript实现的一种用户互动功能,允许访客在网页上留下他们的反馈、建议或者讨论。这种系统通常不需要服务器端的交互,而是直接在客户端处理和展示评论,从而提高了网页的响应速度和用户体验...