js动态创建元素、标签

来源：互联网发布：域名安全认证编辑：程序博客网时间：2024/04/19 15:53
<!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>function addUser(){//创建行var tr = document.createElement("tr");//创建单元格var tdId = document.createElement("td");var tdName = document.createElement("td");var tdSex = document.createElement("td");var tdAge = document.createElement("td");var tdAddr = document.createElement("td");var tdOperation = document.createElement("td");//创建文本节点var txtId = document.createTextNode("U002");var txtName = document.createTextNode("周杰伦");var txtSex = document.createTextNode("男");var txtAge = document.createTextNode("32");var txtAddr = document.createTextNode("中国台北");//创建删除按钮var btnDel = document.createElement("input");btnDel.setAttribute("type","button");btnDel.setAttribute("value","删 除");//创建编辑按钮var btnEdi = document.createElement("input");btnEdi.setAttribute("type","button");btnEdi.setAttribute("value","编 辑");//删除事件btnDel.onclick = function(){delUser(this);}//编辑事件btnEdi.onclick = function(){editUser(this);}//将文本节点和按钮添加到对应单元格tdId.appendChild(txtId);tdName.appendChild(txtName);tdSex.appendChild(txtSex);tdAge.appendChild(txtAge);tdAddr.appendChild(txtAddr);tdOperation.appendChild(btnDel);tdOperation.appendChild(btnEdi);//将单元格添加到行tr.appendChild(tdId);tr.appendChild(tdName);tr.appendChild(tdSex);tr.appendChild(tdAge);tr.appendChild(tdAddr);tr.appendChild(tdOperation);//单元行添加到tBodyvar tBody = document.getElementById("tBody");var lastChild = tBody.lastChild;//lastChild是获取tBody的最后一个tBody.insertBefore(tr,lastChild);//插入最后一个之前}function delUser(btnDel){var tBody = document.getElementById("tBody");tBody.removeChild(btnDel.parentNode.parentNode);}function editUser(btnEdi){var tr = btnEdi.parentNode.parentNode;var tds = tr.childNodes;for(var i=0;i< tds.length - 1;i++){var td = tds[i];var txt = td.firstChild.nodeValue;td.removeChild(td.firstChild);var input = document.createElement("input");input.setAttribute("type","text");input.setAttribute("value",txt);input.style.color = "red";input.style.backgroundColor = "#ccc";input.style.width = 100;td.appendChild(input);}btnEdi.setAttribute("value","保 存");btnEdi.style.color = "red";btnEdi.onclick = function(){saveUser(this);}}function saveUser(btnSave){var tr = btnSave.parentNode.parentNode;var tds = tr.childNodes;for(var i = 0; i< tds.length-1; i++){var td = tds[i];var txt = td.firstChild.value;td.removeChild(td.firstChild);var txtNode = document.createTextNode(txt);td.appendChild(txtNode);}btnSave.setAttribute("value","编 辑");btnSave.style.color = "black";btnSave.onclick = function(){editUser(this);}}</script></head><body>    <table border="1" align="center" width="700">  <caption><h3>用户信息表</h3></caption>  <thead>  <tr>  <th>编号</th>  <th>姓名</th>  <th>性别</th>  <th>年龄</th>  <th>家庭地址</th>  <th>操作</th>  </tr>  </thead>  <tbody id="tBody">  <tr>  <td>U001</td>  <td>刘德华</td>  <td>男</td>  <td>50</td>  <td>中国香港</td>  <td align="center">  <input type="button" value="删除" />  <input type="button" value="编辑" />  </td>  </tr>  <tr>  <td colspan="6"><input type="button" value=" 添加新用户 " onClick="addUser();" /></td>  </tr>            </tbody>  </table></body></html>
0 0