动态添加表格和删除表格(复制粘贴就可以运行)

最新推荐文章于 2024-09-22 11:17:00 发布

IT_男

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量132

点赞数

分类专栏： JavaScript 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/huweiyi13896612259/article/details/84524657

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>
<style type="text/css">
table tr{
height:40px;
}

</style>
<script language="javascript">
function addRow() {
var tableElement = document.getElementsByTagName("table")[1];
var trs = tableElement.rows
//alert("tr行数"+trs.length);
/*
//第一种方法
var trElement = document.createElement("tr");
var tdNameElement = document.createElement("td");
var tdNameTextNode = document.createTextNode(document.getElementById("name").value);
tdNameElement.appendChild(tdNameTextNode);

var tdEmailElement = document.createElement("td");
var tdNameTextNode = document.createTextNode(document.getElementById("email").value);
tdEmailElement.appendChild(tdNameTextNode);

var tdTelElement = document.createElement("td");
var tdTelTextNode = document.createTextNode(document.getElementById("tel").value);
tdTelElement.appendChild(tdTelTextNode);

var tdDeleteElement = document.createElement("td");

trElement.appendChild(tdNameElement);
trElement.appendChild(tdEmailElement);
trElement.appendChild(tdTelElement);
trElement.appendChild(tdDeleteElement);

var tbodyElement = tableElement.childNodes;
for (var i = 0; i < tbodyElement.length; i++) {
if (tbodyElement[i].nodeName == "TBODY") {
tbodyElement[i].appendChild(trElement);
}
}*/

//第二种方法
var row = tableElement.insertRow();
//第一个单元格
var nameCell = row.insertCell();
var tdNameTextNode = document.createTextNode(document.getElementById("name").value);
nameCell.appendChild(tdNameTextNode);

//第二个单元格
var emailCell = row.insertCell();
var tdEmailTextNode = document.createTextNode(document.getElementById("email").value);
emailCell.appendChild(tdEmailTextNode);

//第三个单元格
var telCell = row.insertCell();
var tdTelTextNode = document.createTextNode(document.getElementById("tel").value);
telCell.appendChild(tdTelTextNode);

//第四个单元格
var deleteCell = row.insertCell();
deleteCell.innerHTML="<a href='javascript:void(0)' οnclick='del(this);'>delete</a>";
}

function del(node) {
//alert(node.parentNode.parentNode.nodeName);
trNode = node.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}

</script>
</head>

<body>
<center>
<div>添加用户</div>
<table border="1" width="60%">
<tr>
<td>
姓名：<input name="name" id="name"/>
</td>
<td>
email:<input name="email" id="email"/>
</td>
<td>
tel:<input name="tel" id="tel"/>
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="提交" οnclick="addRow();"/>
</td>
</tr>
</table>
<table border="1" width="60%" style="margin-top:50px;">
<colgroup>
<col width="20%"/>
<col width="30%"/>
<col width="30%"/>
<col width="20%"/>
</colgroup>
<tr height="28px;">
<td>姓名</td>
<td>email</td>
<td>电话</td>
<td></td>
</tr>
<tr>
<td>Tom</td>
<td>1162681603@qq.com</td>
<td>15923736935</td>
<td><a href="javascript:void(0)" οnclick="del(this);">delete</a> </td>
</tr>

</table>
</center>
</body>
</html>