- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
DOM操作HTML文档添加数据实例，一个简单点的实例，类似于无刷新添加数据，可供研究DOM的朋友参考一下。
<html> <head> <title>DOM操作HTML文档实例-www.mb5u.com</title> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <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> <table style="width:400px; background-color:#99ccff;"> <tbody> <tr> <td align="center" colspan="3"><b>分 类 管 理</b></td> </tr> <tr> <td height="20" style="width: 177px">增加分类</td> <td height="20"> <input id="name" type="text" size="15"> </td> <td height="20"> <input type="button" id="submit1" value="添加" onclick="addSort();" /> </td> </tr> <tr> <td height="20" style="font-weight: bold; width: 177px" colspan="3"> 已经添加的分类 </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>