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、最后就可以看到按钮了。
有两种方法来：
方法一：绝对定位布局，利用定位，可以将按钮放到任意位置
1）将包含按钮的父级标签设置为相对定位
.d2{
width:500px
height:300px
background:#660099
position:relative/*设置源相对定位*/
}
2）将按钮设置为绝对定位，百设置左边的距离，顶部的距离
.btn2{
background:#99ff00
position:absolute
left:100px
top:120px
}
3）运行查看结果：度按钮02 离左边100px ,顶部120px
方法二：浮动定位，利用设置按钮为浮动，缺点是不能很精确的定位到某个位置
1）代码如下：利用float:right 设置靠右
2）运行结果如下：
总结：如果需要定位到某个精确的位置，采用定位布局，即方法一
