点击按钮，复杂行追加删除

1.初始化一行 中间一列为下拉框

html代码 

<table id="licenseTable" data-mobile-responsive="true" data-click-to-select="true"
                                   class="table table-bordered" >
                                <thead>
                                <tr>
                                    <th >連番</th>
                                    <th>サーバー名</th>
                                    <th>稼働区分</th>
                                    <th>端末割当台数</th>
                                    <th>操作</th>
                                </tr>
                                </thead>

                                <tbody id="bbsTab">

                                    <tr id="add_line">
                                        <td class="td_center" 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="serverName" name="serverName">
                                                </div>
                                            </td>
                                        <td>
                                            <select class="form-control" id="startType" style="border:none;" onchange="InputInfoDlg.selectChange()"><!-- -->
                                                <option value="0" checked="true">Hot Stand-by</option>
                                                <option value="1" >Cold Stand-by</option>
                                            </select>
                                        </td>
                                        <td>
                                            <div class="form-group" style="margin-bottom: 0px;">
                                                <input type="number" style="border:none;width:60%; margin-left: 30px" class="form-control"
                                                   id="distributionAuthNum" name="distributionAuthNum" onkeyup="InputInfoDlg.setTotalAuthNum()">
                                            </div>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger" onclick="InputInfoDlg.deleteRow(this)" id="cancel">
                                                <i class="fa fa-remove"></i>&nbsp;この行を削除
                                            </button>
                                        </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.addRow()"/>
                                </div>
                            </div>

js代码

/**
 * 新增一行
 */
InputInfoDlg.addRow = function(){
   //下面注释掉的代码也能用！！！

   /*var add_line = document.getElementById('add_line');                            //简化代码，把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() 方法向节点添加最后一个子节点
    numCheck();     //执行下下个方法的*/
   
   //第二种方法
    var lineStr = "<tr id=\"add_line\">\n" +
        "                                        <td class=\"td_center\" align=\"center\">1</td>\n" +
        "                                            <td >\n" +
        "                                                <div class=\"form-group\" style=\"margin-bottom: 0px;\">\n" +
        "                                                    <input type=\"text\" style=\"border:none;width:60%; margin-left: 30px\"  class=\"form-control\" id=\"serverName\" name=\"serverName\">\n" +
        "                                                </div>\n" +
        "                                            </td>\n" +
        "                                        <td>\n" +
        "                                            <select class=\"form-control\" id=\"startType\" style=\"border:none;\"  onchange=\"InputInfoDlg.selectChange()\">\n" +
        "                                                <option value=\"0\" checked=\"true\">Hot Stand-by</option>\n" +
        "                                                <option value=\"1\" >Cold Stand-by</option>\n" +
        "                                            </select>\n" +
        "                                        </td>\n" +
        "                                        <td>\n" +
        "                                            <div class=\"form-group\" style=\"margin-bottom: 0px;\">\n" +
        "                                                <input type=\"number\" style=\"border:none;width:60%; margin-left: 30px\" class=\"form-control\"\n" +
        "                                                   id=\"distributionAuthNum\" name=\"distributionAuthNum\" onkeyup=\"InputInfoDlg.setTotalAuthNum()\">\n" +
        "                                            </div>\n" +
        "                                        </td>\n" +
        "                                        <td>\n" +
        "                                            <button type=\"button\" class=\"btn btn-danger\" onclick=\"InputInfoDlg.deleteRow(this)\" id=\"cancel\">\n" +
        "                                                <i class=\"fa fa-remove\"></i>&nbsp;この行を削除\n" +
        "                                            </button>\n" +
        "                                        </td>\n" +
        "                                    </tr>";

    $("#licenseTable").append(lineStr);

    numCheck();

};

/**
 * 删除当前行
 */
InputInfoDlg.deleteRow =function (r) {
    var authTotalNum =null;
    var i=r.parentNode.parentNode.rowIndex;      //定义一个变量i，值为r的父节点的父节点所在的一行。即是你这里的tr；rowIndex返回某一行在表格的行集合中的位置,parentNode是父节点。

    if(i>1){

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

    }else{

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

    }

    var tr = $("#licenseTable tr");
    for (var i = 0; i < tr.length; i++) {// 遍历表格中每一行的内容
        var tds = $(tr[i]).find("td");
        if (tds.length > 0) {
            var distributionAuthNum = parseInt($(tds[3]).find("input").val());
            authTotalNum += distributionAuthNum ;
        }
    }

    if(isNaN(authTotalNum)){
        $('#authTotalNum').val('');
    }else{
        $('#authTotalNum').val(authTotalNum);
    }

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

}


function numCheck(){

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

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

        $("#bbsTab tr .td_center").eq(i).html(i+1);

    };

}