javascript中怎么实现文本框按钮的添加和删除
4个回答
展开全部
思路：
添加：往页面类型是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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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的行删除。
首先通过<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的行删除。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
具体什么问题，使那个文本显示或者隐藏就行了吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用Jquery添加监听
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
