表格的增删 JaveScript之DOM实例

最新推荐文章于 2022-02-23 19:00:00 发布

流年lh

最新推荐文章于 2022-02-23 19:00:00 发布

阅读量310

点赞数

分类专栏： js 文章标签： javascript 实例前端开发函数数组

本文链接：https://blog.csdn.net/m0_37302495/article/details/73057261

版权

js 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
姓名：<input type="text" id="name" />
年龄：<input type="text" id="age" />
<input type="button" value="添加" id="btn1"/>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李明</td>
<td>20</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>19</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>11</td>
<td></td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
var oTab=document.getElementById("tab1");
var oBtn=document.getElementById("btn1");
var oName=document.getElementById("name");
var oAge=document.getElementById("age");
var id=oTab.tBodies[0].rows.length+1
oBtn.οnclick=function()
{

//增加函数
var oTr=document.createElement("tr");
var oTd=document.createElement("td");
oTd.innerHTML=id++;
//设置变量ID
oTr.appendChild(oTd);//添加数据

//选出各列
var oTd=document.createElement("td");
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);//添加数据

//选出各列
var oTd=document.createElement("td");
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);//添加数据

//选出各列
var oTd=document.createElement("td");
oTd.innerHTML='<a href="#">删除</a>';
oTr.appendChild(oTd);//添加数据

//删除函数
oTd.getElementsByTagName("a")[0].οnclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode)
};

//添加数据
oTab.tBodies[0].appendChild(oTr);
}
</script>
</html>