利用DOM静态更新列表

caleb_520

浏览: 251311 次
性别:
来自: 成都

最近访客更多访客>>

gxh95

xiaochen_su

低调的小夔

small_handsom

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

HTML

今天发表一遍利用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>

下边是一个截图