使用JavaScript制作灵活表单----实现（添加数据、删除行的操作）

最新推荐文章于 2022-09-11 13:15:32 发布

weixin_30794491

最新推荐文章于 2022-09-11 13:15:32 发布

阅读量246

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Hubert-dzl/p/11105979.html

版权

一、使用到的方法：

1. 通过Id获取元素的方法： document .getElementById（“ ”）;

2. 通过TagName获取元素的方法： document .getElementsByTagName（“ "）；

3. 创建元素的方法： document .createElenment（" "）；

4. 创建文本节点的方法： document .createTextNode（“ ”）或（对象）

5. 添加子节点的方法：对象名 . appendChild（对象名）

6. 获取当前对象父节点的方法：对象名 .parentNode

注意：如果获得曾父节点：对象名 . parentNode .parentNode...........

7. 删除子节点的方法：父节点名 .removeChild（子节点名）

8. 设置元素的属性方法： setAttribute（“ 属性名” , " 属性值"）

9. 元素绑定事件，调函数时，括号里面可以有参数： οnclick=" fun（this） "

注意：this指的就是当前对象

二、代码实现

<!DOCTYPE html>

<head>

<style>

table{

text-align: center;

}

</style>

</head>

<body>

<div>

编号<input type="text" id="No" placeholder="请输入编号">

姓名<input type="text" id="name" placeholder="请输入姓名">

性别 <input type="text" id="gender" placeholder="请输入性别">

</div>

<tr>

</tr>

<tr>

</tr>

</table>

function fun(){

//第一步，要获取用户已输入的值

var No=document.getElementById("No").value;

var name=document.getElementById("name").value;

var gender=document.getElementById("gender").value;

//第二步:

// 1.添加 td-No列

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

//添加文本节点

var text_No=document.createTextNode(No);

//在列中添加文本节点

td_No.appendChild(text_No);

//2.添加td_name列

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

//添加文本节点

var text_name=document.createTextNode(name);

//把文本节点添加到列中

td_name.appendChild(text_name);

//3.添加td_gender列

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

//添加文本节点

var text_gender=document.createTextNode(gender);

//把文本节点添加到列中

td_gender.appendChild(text_gender);

//4.添加td_a列

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

var a=document.createElement("a");

//设置额a标签的属性

a.setAttribute("href","#");

a.setAttribute("id","a");

a.setAttribute("onclick","del()");//this指的是获得当前对象

//添加文本节点

var text=document.createTextNode("删除");

//把文本节点添加到a标签中

a.appendChild(text);

//把a标签添加到列中

td_a.appendChild(a);

//第三步：添加行

var tr=document.createElement("tr");

//第四部把列添加到行中去

tr.appendChild(td_No);

tr.appendChild(td_name);

tr.appendChild(td_gender);

tr.appendChild(td_a);

//第五步：把行添加到表格中

var table=document.getElementsByTagName("table")[0];

table.appendChild(tr);

}

//删除

function del(){

//获取当前对象

var j=document.getElementById("a");

//获取当前对象所在的表

var table=j.parentNode.parentNode.parentNode;

//获取当前对象所在的行

var tr=j.parentNode.parentNode;

//执行删除操作

table.removeChild(tr);

}

</script>

</body>

</html>

转载于:https://www.cnblogs.com/Hubert-dzl/p/11105979.html