js控制增加一行

这是这两天做项目碰到到问题，用js实现动态增加一行，经过同事帮忙，用下面方法实现了所需功能。

先写相关js

/*
   *增加模板行
   */
   
   function addRow() {
    var table = document.getElementById("addTable");
    var tbody = document.getElementById("templeteTBody");
    var newTBody = tbody.cloneNode(true);
    newTBody.style.display="";
    var footTBody = document.getElementById("footTbody");
    return table.insertBefore(newTBody,footTBody);
   }
   /*
   *删除模板行
   */
   
   function deleteRow(obj) {
    var tbody = obj.parentNode.parentNode.parentNode;
    var table = document.getElementById("addTable");
    table.removeChild(tbody);
   }

/**
   *向模板中填充值
   */
    function setValue(){

            var tbody=addRow();

    }

//页面代码

<input type="button" value="增加" οnclick="setValue()">

<table id="addTable">

    <tbody id="templeteTBody"  style="display: none;">

            <tr>

                 <td><input type="button" value="删除" οnclick="deleteRow(this)"/></td>

                <td>a</td>

                <td><input type="text" /></td>

                <td>b</td>

                <td><input type="text" /></td>    

            </tr>

    </tbody>

    <tbody id="footTbody">
    </tbody>

</table>

以上代码即可以实现js动态增加一行的效果，并且上边代码可以扩展，比如一次增加多行的情况，只需在templeteTBody里边增加<tr></tr>标记即可。