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、最后就可以看到按钮了。
可以使用input的click事件进行处理，这里假设点击转向的链接是百度，方法如下：
1、DOM0级事件处理:
1）html代码：<input name="注册" type="button" id="btn1" title="登注册" value="注册" o nclick="goToBaiDu()"/>
2）js代码：
function goToBaiDu(){
console.log('现在去百度啦！')
window.open('http://www.baidu.com')
}
效果如下：
2、DOM2级事件，绑定click事件，如下：
1）html代码：<input name="注册" type="button" id="btn1" title="登注册" value="注册"/>
2）js代码：
window.onload = function(){
document.getElementById('btn1').addEventListener('click',goToBaiDu)
}
function goToBaiDu(){
console.log('现在去百度啦！')
window.open('http://www.baidu.com')
}
效果如下：
3、上面的方式的打开一个新窗口，还有一个打开链接的方式，是在当前标签页下直接跳转到另一个页面，代码如下：
window.location.href="http://www.baidu.com"
