html怎么在页面上加入增加行的按钮

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' >";

}

这个时候就会发现点击按钮就会增加一行，多次就会多行。