js dom写的增加和删除

最新推荐文章于 2020-09-17 15:07:21 发布

php_jiang

最新推荐文章于 2020-09-17 15:07:21 发布

阅读量684

点赞数

文章标签： table input button function xhtml html

本文链接：https://blog.csdn.net/php_jiang/article/details/7303478

版权

用js dom写的一个简单的增删，用的都是基础的知识

html标签用的很少，都是用js生成的

-------------------------------------------------------------------------------------------------------

<!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>
table{
width:200px;
height:10px;}
</style>
</head>

//定义一个函数方便调用

function tian(){

//生成一个table标签

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

//定义border属性

table.border="1px";

//生成tr

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

//查找html中的input标签

var tex=document.getElementsByTagName("input");

for(i=0;i<4;i++){

//生成文本

var text=document.createTextNode(tex[i].value);

//生成td

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

//把td文本后置到text前

td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
document.getElementById("d1").appendChild(table);
}
function shan(){
var table=document.getElementsByTagName("table");
var div=table[0].parentNode;

//删除最后的table
var sha=div.removeChild(table[table.length-1]);
}

</script>
<body>
<form>
姓名：<input type="text" name="xing" value="姓名"/>
性别:<input type="text" name="bie" value="性别"/>
电话：<input type="text" name="dian"value="电话"/>
邮箱:<input type="text" name="you" value="邮箱"/>
<input type="button" value="添加" οnclick="tian()"/>
<input type="button" value="删除" οnclick="shan()" />
</form>
<div id="d1">
</div>
</body>
</html>

php_jiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js dom写的增加和删除

用js dom写的一个简单的增删，用的都是基础的知识html标签用的很少，都是用js生成的-------------------------------------------------------------------------------------------------------无标题文档table{width:200px;hei
复制链接

扫一扫