JS实现动态添加、删除表格行

不墨迹，先线上效果图：

jsp代码：

<div class="form-group">
  <label for="input1" class="col-lg-4 col-sm-2 control-label padding">输入框1：</label>
  <div class="col-lg-7">
      <select class="form-control m-bot15" id = "input1">
          <option value="0">停用</option>
	  <option value="1" selected>启用</option>
     </select>
  </div>
  <div class="col-lg-1 padding">
	  <span style="color: red;" >*</span>
  </div>
</div>
<div class="form-group">
    <label for="input2" class="col-lg-4 col-sm-2 control-label padding">输入框2：</label>
    <div class="col-lg-7">
        <input class="form-control m-bot15" type="text" id="input2" placeholder="" maxlength="32">
    </div>
</div>
<div class="form-group">
    <label for="input3" class="col-lg-4 col-sm-2 control-label padding">输入框3：</label>
    <div class="col-lg-7">
        <input class="form-control m-bot15" type="text" id="input3" placeholder="" maxlength="200">
    </div>
</div>
<div class="panel-body" id="dynamicTable">
    <div class="adv-table editable-table ">
        <div class="space15"></div>
	<table class="table table-striped table-hover table-bordered" id="editable-sample">
	    <thead>
	        <tr align="center">
		    <th style="width: 22;text-align: center;">列1</th>
		    <th style="width: 12%;text-align: center;">列2</th>
		    <th style="width: 18%;text-align: center;">列3</th>
		    <th style="width: 12%;text-align: center;">列4</th>
		    <th style="width: 15%;text-align: center;">列5</th>
		    <th style="width: 13%;text-align: center;">列6</th>
		    <th style="width: 8%;text-align: center;">列7</th>
		</tr>
	    </thead>
	    <tbody>
	        <tr id="tr_0" class="" align="center">
		    <td nowrap>
			<select>
			    <option value="test1">测试1</option>
			</select>
		    </td>
		    <td nowrap>
			<input type="text" id="r0_2" maxlength="10" style="border: 0px;" onblur="orderCheck('0')" onkeyup="checkInteger(this);"/>
		    </td>
		    <td nowrap>
			<input type="text" id="r0_3" maxlength="5" style="border: 0px;" onchange="calculateIng('0','0')" onkeyup="checknum(this);" />
		    </td>
		    <td nowrap>
			<input type="text" id="r0_4" maxlength="5" style="border: 0px;" disabled />
		    </td>
		    <td nowrap>
			<input type="text" id="r0_5" maxlength="5" style="border: 0px;" onchange="calculateIng('0','1')" onkeyup="checknum(this);"/>
		    </td>
		    <td nowrap>
			<input type="text" id="r0_6" maxlength="10" style="border: 0px;" onkeyup="checknum(this);" value="0" />
		    </td>
		    <td align="center" >
			<a onclick="delRow('0');" title='删除'><span class='fa fa-times' aria-hidden='true'></span></a>
		    </td>
		</tr>
	    </tbody>
        </table>
    </div>
</div>
<div class="form-group">
    <div class="col-lg-offset-2 col-lg-10" style="margin-left: 35%;">
	<button id="tab_add" type="button" class="btn btn-default" onclick="addRow();" style="margin-bottom: 10px;">
	    <span class="fa fa-plus" aria-hidden="true"></span> 新行
	</button>
	<button type="button" class="btn btn-primary marginTB-xs" onclick="save();" id="bt_save">
	    <i class="fa fa-save m-right-xs"> 保存</i>
	</button>
	<button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">
	    <i class="fa fa-save m-right-xs"> 取消</i>
	</button>
    </div>
</div>

js处理

/** 表格添加行 */
var rowCount = 0;			// 表格第几行
var row_mark = null;			// 行标数组
function addRow() {
    rowCount ++;
    if (rowCount != 0) {
	row_mark.push(rowCount);
    }
    var content = '<tr id="tr_' + rowCount + '"> ';
    for (var i = 1; i < 7; i++) {
	content += '<td nowrap>';
	if(i == 1){
	    content += '<select>';
	    content += '<option value="test1">测试' + rowCount + '</option>';
	    content += '<select>';
            content += '</td>';
	}else  if (i == 2) {
	    content += '<input type="text" id="r' + rowCount + '_2" maxlength="10" style="border: 0px;" onblur="orderCheck(\''+ rowCount +'\')" onkeyup="checkInteger(this);" />';
	    content += '</td>';
	} else if (i == 3) {
	    content += '<input type="text" id="r' + rowCount + '_3" maxlength="5" style="border: 0px;" onchange="calculateIng(\''+ rowCount +'\', \'0\')" onkeyup="checknum(this);" />';
	    content += '</td>';
        } else if(i == 4){ 
	    content += '<input type="text" id="r' + rowCount + '_4" maxlength="5" style="border:0px;" disabled/>';
	    content += '</td>';
	} else if(i == 5){ 
	    content += '<input type="text" id="r' + rowCount + '_5" maxlength="5" style="border: 0px;" onchange="calculateIng(\''+ rowCount +'\', \'1\')" onkeyup="checknum(this);" />';
	    content += '</td>';
	} else if(i == 6){ 
	    content += '<input type="text" id="r' + rowCount + '_6" maxlength="10" style="border: 0px;" onkeyup="checknum(this);" value="0" />';
	    content += '</td>';
	} else{
	    content += '<input type="text" id="r' + rowCount + '_' + i +'" maxlength="20" style="border:0px;"/>';
	    content += '</td>';
	} 
    }
    content += '<td align="center"><a onclick="delRow(\''+ rowCount +'\');" title=\'' + sys.lan("del") + '\'><span class=\'fa fa-times\' aria-hidden=\'true\'></span></a></td>';
    content += '</tr>';
    $("#editable-sample").append(content);  
}

/** 表格删除行 */
function delRow(rownum) {
    if (rowCount != 0) {
        row_mark.splice($.inArray(sys.parseNum(rownum),row_mark), 1);
        $("#editable-sample #tr_" + rownum).remove();
        rowCount--;
    } else {
        $("#errorMsg").html(sys.lan("recipes_delrowerr"));	// 提示：只剩一行不能删除	
    }
}