<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script language="javascript" type="text/javascript"> // 增加分类函数 function addSort() { var name = document.getElementById("name").value; if(name == "" ) { alert("请输入分类名称！"); document.getElementById("name").focus(); 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); document.getElementById("sortList").appendChild(row); //清空输入框 document.getElementById("name").value = ""; } // 删除分类函数 function deleteSort(id) { if (id!=null) { var rowToDelete = document.getElementById(id); var sortList = document.getElementById("sortList"); sortList.removeChild(rowToDelete); } } </script> </head> <body> <div> <span> <input id="name" type="text" size="15"> </span><span> <input type="button" id="submit1" value="添加" onclick="addSort();" /> </span> </div> <!--<table style="400px; background-color:#99ccff;"> <tbody> <tr> <td height="20"><input id="name" type="text" size="15"></td> <td height="20"><input type="button" id="submit1" value="添加" onclick="addSort();" /></td> </tr> </tbody> </table>--> <table style="border:1px solid #000000;" width="400"> <tr> <td >分类名称</td> <td id="pos_1">操作</td> </tr> <tbody id="sortList" > </tbody> </table> </body> </html>