<script language="JavaScript">
function tianjia(){
//var inputNode = document.getElementById("guo");
//alert(inputNode.value);
//alert(inputNode.type);
//获取文本框中的值。
var xmValue = document.getElementById("xm").value;
var emValue = document.getElementById("em").value;
var phValue = document.getElementById("ph").value;
//alert(xmValue);
//把文本框的值添加到td中。
//1.姓名td-----------------------------------------------------------------
var xmtdNode = document.createElement("td");
var xmTextNode = document.createTextNode(xmValue);
xmtdNode.appendChild(xmTextNode);
//2.email td---------------------------------------------------------------
var emtdNode = document.createElement("td");
var emTextNode = document.createTextNode(emValue);
emtdNode.appendChild(emTextNode);
//3.phone td---------------------------------------------------------------
var phtdNode = document.createElement("td");
var phTextNode = document.createTextNode(phValue);
phtdNode.appendChild(phTextNode);
//4.删除 td <td><a href ="deteleEmp?id=name">删除</a></td>
var deleteTdNode = document.createElement("td")
var aNode = document.createElement("a");
aNode.setAttribute("href","deteleEmp?id="+xmValue);
var aTextNode = document.createTextNode("删除")
aNode.appendChild(aTextNode);
deleteTdNode.appendChild(aNode);
//把td节点添加到tr中。
var trNode = document.createElement("tr");
trNode.appendChild(xmtdNode);
trNode.appendChild(emtdNode);
trNode.appendChild(phtdNode);
trNode.appendChild(deleteTdNode);
//获取table，把tr增加到table中。
var tabNode = document.getElementById("tid");
//创建tbody
var tbodyNode = document.createElement("tbody")
//var tbodyNode = tabNode.firstChild;
tbodyNode.appendChild(trNode);
tabNode.appendChild(tbodyNode);
//增加删除事件----------------------------------------------------------
aNode.onclick = function(){
// return 使超链接失效
return deleteTr(aNode);
}
}
function deleteTr(aNode){
// 获取用户姓名。
var name = aNode.parentNode.parentNode.firstChild.firstChild.nodeValue;
//alert("name"+name);
//弹窗确定要删除name 用户吗？
var flag = window.confirm("您确定要删除"+name+"用户吗？");
//取消删除时返回 flag= false； return false 使超链接失效
if(!flag){
return false;
}
//获取要删除的tr行。
var trNode = aNode.parentNode.parentNode;
//找到tbody
var tbody = trNode.parentNode;
//进行删除tr
tbody.removeChild(trNode);
//return false 使超链接失效
return false;
}
</script>
<style type="text/css">
table {
border:#ff5500 1px solid;
}
table td {
border:#00ff55 1px solid;
}
</style>
</head>
<body>
姓名：<input type="text" name="xingming" id="xm"/><br/>
邮箱：<input type="text" name="email" id="em"/><br/>
电话：<input type="text" name="phone" id="ph"/><br/>
<button οnclick="tianjia()">登录</button>
<table id="tid">
<tr>
<td>姓名</td>
<td>email</td>
<td>phone</td>
<td>删除</td>
</tr>
</table>
</body>
</html>
function tianjia(){
//var inputNode = document.getElementById("guo");
//alert(inputNode.value);
//alert(inputNode.type);
//获取文本框中的值。
var xmValue = document.getElementById("xm").value;
var emValue = document.getElementById("em").value;
var phValue = document.getElementById("ph").value;
//alert(xmValue);
//把文本框的值添加到td中。
//1.姓名td-----------------------------------------------------------------
var xmtdNode = document.createElement("td");
var xmTextNode = document.createTextNode(xmValue);
xmtdNode.appendChild(xmTextNode);
//2.email td---------------------------------------------------------------
var emtdNode = document.createElement("td");
var emTextNode = document.createTextNode(emValue);
emtdNode.appendChild(emTextNode);
//3.phone td---------------------------------------------------------------
var phtdNode = document.createElement("td");
var phTextNode = document.createTextNode(phValue);
phtdNode.appendChild(phTextNode);
//4.删除 td <td><a href ="deteleEmp?id=name">删除</a></td>
var deleteTdNode = document.createElement("td")
var aNode = document.createElement("a");
aNode.setAttribute("href","deteleEmp?id="+xmValue);
var aTextNode = document.createTextNode("删除")
aNode.appendChild(aTextNode);
deleteTdNode.appendChild(aNode);
//把td节点添加到tr中。
var trNode = document.createElement("tr");
trNode.appendChild(xmtdNode);
trNode.appendChild(emtdNode);
trNode.appendChild(phtdNode);
trNode.appendChild(deleteTdNode);
//获取table，把tr增加到table中。
var tabNode = document.getElementById("tid");
//创建tbody
var tbodyNode = document.createElement("tbody")
//var tbodyNode = tabNode.firstChild;
tbodyNode.appendChild(trNode);
tabNode.appendChild(tbodyNode);
//增加删除事件----------------------------------------------------------
aNode.onclick = function(){
// return 使超链接失效
return deleteTr(aNode);
}
}
function deleteTr(aNode){
// 获取用户姓名。
var name = aNode.parentNode.parentNode.firstChild.firstChild.nodeValue;
//alert("name"+name);
//弹窗确定要删除name 用户吗？
var flag = window.confirm("您确定要删除"+name+"用户吗？");
//取消删除时返回 flag= false； return false 使超链接失效
if(!flag){
return false;
}
//获取要删除的tr行。
var trNode = aNode.parentNode.parentNode;
//找到tbody
var tbody = trNode.parentNode;
//进行删除tr
tbody.removeChild(trNode);
//return false 使超链接失效
return false;
}
</script>
<style type="text/css">
table {
border:#ff5500 1px solid;
}
table td {
border:#00ff55 1px solid;
}
</style>
</head>
<body>
姓名：<input type="text" name="xingming" id="xm"/><br/>
邮箱：<input type="text" name="email" id="em"/><br/>
电话：<input type="text" name="phone" id="ph"/><br/>
<button οnclick="tianjia()">登录</button>
<table id="tid">
<tr>
<td>姓名</td>
<td>email</td>
<td>phone</td>
<td>删除</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
