实现如下&＃xff1a;可以点击delete删除信息&＃xff0c;并且可以通过添加新员工功能可以把新员工加到上一个表格中。
其中&＃xff0c;css代码如下&＃xff1a;
&＃64;CHARSET "UTF-8";
#total {width: 450px;margin-left: auto;margin-right: auto;
}ul {list-style-type: none;
}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;
}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;
}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;
}th,td {background-color: white;
}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;
}#formDiv input {width: 100%;
}.word {width: 40px;
}.inp {width: 200px;
}
Javascript代码和html结构如下&＃xff1a;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;UTF-8">
<title>添加删除记录练习</title>
<link rel&＃61;"stylesheet" type&＃61;"text/css" href&＃61;"ex_2_style/css.css" />
<script type&＃61;"text/Javascript">function removeTr(){var trNode &＃61; this.parentNode.parentNode;var tds &＃61; trNode.getElementsByTagName("td");var nameStr &＃61; tds[0].firstChild.nodeValue;var flag &＃61; confirm("真的要删除" &＃43; nameStr &＃43; "的信息吗&＃xff1f;");if(flag){trNode.parentNode.removeChild(trNode);}return false;}window.onload &＃61; function(){var aEles &＃61; document.getElementsByTagName("a");for(var i &＃61; 0;i < aEles.length;i&＃43;&＃43;){aEles[i].onclick &＃61; removeTr;}var subBtn &＃61; document.getElementById("addEmpButton");subBtn.onclick &＃61; function(){var nameText &＃61; trim(document.getElementById("empName").value);var emailText &＃61; trim(document.getElementById("email").value);var salaryText &＃61; trim(document.getElementById("salary").value);document.getElementById("empName").value &＃61; nameText;document.getElementById("email").value &＃61; emailText;document.getElementById("salary").value &＃61; salaryText;if(nameText &＃61;&＃61; "" || emailText &＃61;&＃61; "" || salaryText &＃61;&＃61; ""){alert("您输入的内容不完整");return ;}var nameTd &＃61; document.createElement("td");nameTd.appendChild(document.createTextNode(nameText));var emailTd &＃61; document.createElement("td");emailTd.appendChild(document.createTextNode(emailText));var salaryTd &＃61; document.createElement("td");salaryTd.appendChild(document.createTextNode(salaryText));var aTd &＃61; document.createElement("td");var aNewEle &＃61; document.createElement("a");aNewEle.href &＃61; "deleteEmp?id&＃61;XXX";aNewEle.appendChild(document.createTextNode("Delete"));aNewEle.onclick &＃61; removeTr;aTd.appendChild(aNewEle);var trNode &＃61; document.createElement("tr");trNode.appendChild(nameTd);trNode.appendChild(emailTd);trNode.appendChild(salaryTd);trNode.appendChild(aTd);var empTable &＃61; document.getElementById("employeeTable");empTable.appendChild(trNode);}function trim(str){var reg &＃61; /^\s*|\s*$/g;return str.replace(reg,"");}}
</script>
</head>
<body><table id&＃61;"employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom&＃64;tom.com</td><td>5000</td><td><a href&＃61;"deleteEmp?id&＃61;001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry&＃64;sohu.com</td><td>8000</td><td><a href&＃61;"deleteEmp?id&＃61;002">Delete</a></td></tr><tr><td>Bob</td><td>bob&＃64;tom.com</td><td>10000</td><td><a href&＃61;"deleteEmp?id&＃61;003">Delete</a></td></tr></table><div id&＃61;"formDiv"><h4>添加新员工</h4><table><tr><td class&＃61;"word">name: </td><td class&＃61;"inp"><input type&＃61;"text" name&＃61;"empName" id&＃61;"empName" /></td></tr><tr><td class&＃61;"word">email: </td><td class&＃61;"inp"><input type&＃61;"text" name&＃61;"email" id&＃61;"email" /></td></tr><tr><td class&＃61;"word">salary: </td><td class&＃61;"inp"><input type&＃61;"text" name&＃61;"salary" id&＃61;"salary" /></td></tr><tr><td colspan&＃61;"2" align&＃61;"center"><button id&＃61;"addEmpButton" value&＃61;"abc">Submit</button></td></tr></table></div></body>
</html>
京公网安备 11010802041100号