点击按钮追加一行，删除一行

初始化一行

点击追加效果，点击第二行删除还原为初始化状态，如果追加三行，删除第二行，序号为1,2.

 

HTML代码

<table id="modelTable" data-click-to-select="true" class="table table-bordered">
                                <thead>
                                <tr>
                                    <th width="45px">連番</th>
                                    <th>メーカー</th>
                                    <th>型番</th>
                                    <th width="40px">操作</th>
                                </tr>
                                </thead>

                                <tbody id="bbsTab2">
                                <tr id="add_line2">
                                    <td class="td_center2" align="center">1</td>
                                    <td>
                                        <div class="form-group" style="margin-bottom: 0px;">
                                        <input type="text" style="border:none;width:60%; margin-left: 30px" class="form-control" id="factor"
                                               name="factor">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group" style="margin-bottom: 0px;">
                                            <input type="text" style="border:none;width:60%; margin-left: 30px" class="form-control" id="model"
                                               name="model">
                                        </div>
                                    </td>
                                    <td><#button btnCss="danger" name="この行を削除" id="cancel" icon="fa-remove"
                                        clickFun="InputInfoDlg.deleteRow2(this)"/>
                                    </td>
                                </tr>

                                </tbody>

                             </table>

                             <div class="row btn-group-m-t">
                                <div class="col-sm-10">
                                    <#button btnCss="info" name="行を追加" id="ensure" icon="fa-plus"
                                    clickFun="InputInfoDlg.addRow2()"/>
                                </div>
                            </div>

 js代码

/**
 * 新增一行
 */
InputInfoDlg.addRow2 = function(){

    var add_line = document.getElementById('add_line2');                            //简化代码，把id名赋值给等号前面的名称中

    var nodeFather = add_line.parentNode;       //获取add_line中父节点并赋值到nodeFather

    var node_clone = add_line.cloneNode();     //获取add_line中使用cloneNode()中方法克隆所有属性以及它们的值

    content = add_line.innerHTML;      //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

    node_clone.removeAttribute('id');      //removeAttribute() 方法删除指定的属性

    node_clone.innerHTML = content;      //

    nodeFather.appendChild(node_clone);   //appendChild() 方法向节点添加最后一个子节点

    numCheck2();     //执行下下个方法的



};

/**
 * 删除当前行
 */
InputInfoDlg.deleteRow2 =function (r) {

    var i=r.parentNode.parentNode.rowIndex;      //定义一个变量i，值为r的父节点的父节点所在的一行。即是你这里的tr；rowIndex返回某一行在表格的行集合中的位置,parentNode是父节点。

    if(i>1){

        document.getElementById('modelTable').deleteRow(i);

    }else{

        alert("不能删除第一行");

    }

    numCheck2();//执行下个方法的

};


function numCheck2(){

    var num = $("#bbsTab2 tr").length;     //获取tr的长度

    for (var i = 0; i <= num; i++) {         //进行循环

        $("#bbsTab2 tr .td_center2").eq(i).html(i+1);

    };

}

复杂行追加删除，看我下一篇博客  ：点击按钮，复杂行追加删除