借助JQuery更简单实现，这里是一个用原生javascript实现的示例：
<html>
<head>巧敬
<title></title>
<scripttype="text/javascript">
functionaddButton(){
varhtml="<inputtype=\"button\"value=\"新加\"onclick=\"newButton()\">"
document.getElementById("add").innerHTML=html
}
functionnewButton(){
alert("我是新加的按钮")
}
</script>
</head>
<body>
<div>
<p>点击该按钮增加一个新按钮</p>
<inputtype="button"value="点击增加"onclick="addButton()"喊宽斗>
<p>新增的按钮在这显示</p>
<divid="add"></div>
</div>
</body>
</html>
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于郑磨原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
思路：
添加：往页面类型是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、打开Sublime text3，新建一个HTML文档，并且建立好框架。
2、输入代码：
<table>
兄竖 <tr>
<td>Student</td>
<td><input type="text" name="student"></td>
</tr>
<tr>
<td>Height</td>
<td><input type="text"大尘御 name="height"></td>
</tr>
<tr>
<td colspan=2>
<input type="button" name="add" value="add">
</td>
</tr>
</table>
设滚岩立两行文本输入框，并且提示可以增加的按钮。
3、<table id="mainTable">
为标签加上id方便定位。
4、加上监听事件的函数。
onclick="adding()"
然后连接js文档。
<script src="test.js"></script>
5、function adding(){
var table = document.getElementById("mainTable")
var addTr = table.insertRow(2)
}
创建函数，然后设定两个变量。一个用于定位标签位置，另一个增加行数在第二行。测试一下，多次点击确实会往下移动。
6、var addTd = addTr.insertCell()
addTd.innerHTML = "新增"
除了要增加tr还要增加td，并且增加文本提示。
7、稍微修改一下变量名字。再增加文本输入框。
function adding(){
var table = document.getElementById("mainTable")
var addTr = table.insertRow(2)
var td1 = addTr.insertCell()
td1.innerHTML = "新增"
var td2 = addTr.insertCell()
td2.innerHTML = "<input type='text 'name='newnew' >"
}
8、最后就可以看到按钮了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）