javascript中怎么实现文本框按钮的添加和删除

如题所述

思路:

添加:往页面类型是button的input 标签

删除:通过input标签查找所有添加的按钮,移除其中一个

代码示例:

<script>
function add(){
   var buttons = document.getElementById('buttons');
   buttons.innerHTML += ("<input type='button' value='新1'/>");
}
function del(){   
   var buttons = document.getElementById('buttons');
   var inputs =buttons.getElementsByTagName('input');
   if(inputs.length>0){
      inputs[0].remove();
   }
}
</script>
</head>
<body>
<div id='buttons'>
</div>
<input type='button' value='添加' onclick='add()'/>
<input type='button' value='删除' onclick='del()'/>
</body>

温馨提示:答案为网友推荐,仅供参考
第1个回答  2014-01-16
insertRow(索引)了,即指定在一个表格的索引后添加一个新行。
首先通过<a href="javascript:addEmail()">+</a>,为“+”添加一个JavaScript自定义函数addEmail()。
function addEmail()
{
var myTable=document.getElementById('myTable').insertRow(5);
var Cell0=myTable.insertCell(0);
var Cell1=myTable.insertCell(1);
var Cell2=myTable.insertCell(2);

var element_input=document.createElement("input");
element_input.type="text";
element_input.name="Emails[]";

Cell0.innerHTML=" ";
Cell1.appendChild(element_input);
Cell2.innerHTML="<a onclick=\"deleteRow(this)\">-</a>";
}
使用DOM通过ID找到得整个表格节点,其后调入insertRow(5)方法,这里是将新行添加到第5行的下面。
接着,调用insertCell()方法添加三个新单元格(第一列是空格,第二列是新文本框,第三列是“-”链接)。
使用document.createElement("input");创建一个input元素,并指定其类型和名称,以便用于获得它里面值。
最后使用appendChild方法,将新建的INPUT元素加到第二列的单元格中。

删除方法:
*如果想要删除某个新添加的文本框,那么又该怎么做呢?
想法是这样的:
在新添加的文本框后,添加一个超级链接“-”,将点击时触发自定义函数deleteRow(this),将当前被点击的对象传入。
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex
document.getElementById('myTable').deleteRow(i)
}
自定义方法在接收到被点击的对象之后,并不能自己删除自己,因为这个deleteRow()方法是对表格元素进行的操作,而不是行。
通过:当前对象.parentNode.parentNode.rowIndex取得了当前行的索引。
解释:当前对象为<input />元素,当前对象.parentNode为<td>元素,当前对象.parentNode.parentNode为<tr>元素。
在获得了希望删除的建造的索引之后,最后再通过DOM获得整个表格元素,然后调用这个表格元素的deleteRow(i),将刚刚得到的那个索引为i的行删除。
第2个回答  2014-01-16
具体什么问题,使那个文本显示或者隐藏就行了吧
第3个回答  2014-01-16
用Jquery添加监听

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网