html动态添加删除文本框,DOM动态添加与删除元素

动态的增加和删除元素在很多地方都需要用到，比如有时候需要大量数据收集的时候，我们就需要动态增加form表单等。下面是一个例子：

效果演示

动态添加用户

添加新的用户名

用户信息

JavaScript代码

DOM-动态添加和删除元素

body,td,caption,input{ font-size:12px; }

.test { border-collapse:collapse; }

.test td { border:1px solid #ccc; line-height:150%; }

var count = 0;

//添加新用户的操作

function addNewUser()

{

//得到文本框对象

var objName = document.getElementById('name');

if(objName.value=="")

{

alert("用户名不能为空！");

objName.focus();

return;

}

else

{

count++;

//先创建行tr

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

//设置行对象的ID属性为用户输入的用户名称

row.setAttribute("id",objName.value+count);

//创建td对象

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

//td对象下添加子节点 - 内容 TextNode 对象

column.appendChild(document.createTextNode(objName.value));

//row对象将td对象添加为子节点对象

row.appendChild(column);

//再创建删除按钮

var delBtn = document.createElement("input");

//类型

delBtn.setAttribute("type","button");

//文本

delBtn.setAttribute("value","Delete");

//设置对象的事件处理 - 所调用的函数

var name = objName.value+count;

delBtn.οnclick= function(){delUser(name);};

column = document.createElement("td");

column.appendChild(delBtn);

//行对象添加

row.appendChild(column);

//添加这一行到tbody中

document.getElementById('userList').appendChild(row);

objName.value="";

}

//删除元素

function delUser(name)

{

if(name!=null)

{

var objRow = document.getElementById(name);

var objTBODY = document.getElementById("userList");

//删除

objTBODY.removeChild(objRow);

}

动态添加用户
添加新的用户名
用户信息

html动态添加删除文本框,DOM动态添加与删除元素相关推荐

添加删除按钮html代码怎么写,JavaScript添加一个文本框并带有删除按钮
JavaScript添加一个文本框并带有删除按钮属于前端实例代码,有关更多实例代码大家可以查看. 实际操作中可能需要动态的创建和删除一个元素,比较常见是添加一个文本框和一个删除按钮,点击删除按钮可以删 ...
java实现动态展示当前时间,在文本框中动态地显示当前时间，有木有人做过，指导下初学者...
在文本框中动态地显示当前时间,有木有人做过,指导下菜鸟? 想在两个文本框中,一个动态显示日期,一个动态显示时间. 如下图这样: 不过这是静态的. 虽然网上有动态的代码,但是javascript的. d ...
世界之窗浏览器删除文本框信息_文本框——Excel里的便利贴
工作表里面的单元格应该是足够我们来记录数据和信息了.但是文本框这个功能在工作表中还是存在,可以理解为便利贴功能. 插入文本框 1.点击"插入"选项卡. 2.然后点击"文本 ...
动态添加的文本框验证_Excel教程：VLOOKUP+MATCH组合构建动态图表——让你的图表动起来...
国庆惊喜大促狂欢大放价 23门原创教程,原价168,限时87元!! 国庆狂欢,优惠不等人,早买早便宜点击了解支持微信公众号+小程序+APP+PC网站多平台学习今天,小爱同学在做半年度的业绩报表 ...
uniapp 电商app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
uniapp 发布文章app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
ubuntu20.04使用chrome、搜狗输入法删除候选词内容时文本框的内容也会被删除
1.设备信息 OS: Ubuntu 20.04.2 LTS x86_64 Kernel: 5.8.0-63-generic Shell: zsh 5.8 DE: GNOME CPU: Intel i5 ...
Js实现动态插入删除文本框
自己做了个Js插入文本框的例子,扔上别忘了. <html><head><title>Untitled Document</title><meta ...
html点击按钮动态添加input文本框
html <div id="org"></div> //注意:id不能写在button上,js获取不到button的id(可能是我们公司的框架的原因)< ...
as3文本框的动态拖拽和编辑
如今非常多软件都支持了编辑界面的文本拖拽和点击编辑来直接改动数值, 这样便于操作, 并且体验性也好, 抛砖引玉吧于是就用好久没编写的as3来写了一下: 由于用的flash ide写的没有提示, 就临 ...

html动态添加删除文本框,DOM动态添加与删除元素

html动态添加删除文本框,DOM动态添加与删除元素相关推荐

最新文章

热门文章