利用DOM静态更新列表

caleb_520 · 发表于 2013-2-7 20:28:31

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

下边是一个截图

		自动登录	找回密码
密码			立即注册