HTML-table单行操作

<div class="row m-b-sm m-t-sm" style="padding-top: 10px;">
	<div class="col-sm-12 form-horizontal">
		<label class="col-sm-2 control-label">具体事项</label><br/>
		<div class="col-sm-10 col-sm-offset-1" style="padding: 2px;">
			<span style="padding:3px 5px;border-radius:3px;background-color:#e7f7ff;border:solid 1px #90d3ff;color:#6e6f6f;cursor:pointer;">
				<i class="fa fa-exclamation-circle text-info"></i>
				已选择<span id="item-rows-count"></span>项
				总价：<span id="item-money-count"></span>万
			</span>
                        <div style="float: right;">
				<button class="btn btn-primary" type="button" id="icon-add" onclick="add_tr();">
					<i class="fa fa-plus"></i><span class="bold"> 新增事项</span>
				</button>
				<button class="btn btn-danger" type="button" id="icon-delete" onclick="del_tr();">
					<i class="fa fa-remove"></i><span class="bold"> 删除事项</span>
				</button>
                        </div>								
		</div>
                   
	</div>
	<div class="col-sm-12 form-horizontal">
		<div class="col-sm-10 col-sm-offset-1">
            <table class="table table-bordered" id="items_table" style="background-color: #eee;">
                <thead>
	                <tr style="height: 30px">
	                    <th width="8%"></th>
	                    <th width="30%">事项</th>
	                    <th width="22%">资金计划（元）</th>
	                    <th width="40%">备注</th>
	                </tr>
                </thead>
                <tbody id="items_table_body">
                	<tr id="">
                		<td><label class="checkbox-inline i-checks"><input type="checkbox" name="checkbox_index" value="1"><span style="margin-left: 5px;">1</span></label></td>
                		<td><input name="itemName" value="事项1"></td>
                		<td><input name="itemCash" value="资金计划（元）1"></td>
                		<td><input name="mark" value="备注1"></td>
                	</tr>
                	<tr id="">
                		<td><label class="checkbox-inline i-checks"><input type="checkbox" name="checkbox_index" value="2"><span style="margin-left: 5px;">2</span></label></td>
                		<td><input name="itemName" value="事项2"></td>
                		<td><input name="itemCash" value="资金计划（元）2"></td>
                		<td><input name="mark" value="备注2"></td>					                		
                	</tr>					                	
                </tbody>
            </table>									
		</div>
	</div>
</div>

点击事件（按钮）

1.新增事项 javascript:add_tr()

• 获取table的DOM元素，document.getElementById('items_table')
• DOM.rows
• rows.length
• 变量_tr_html为单行的innerHTML
• jQuery操作$(selector).append(""),这边默认的是<tbody></tbody>

function add_tr(){
    var tb = document.getElementById('items_table');    // table 的 id
    var rows = tb.rows;                           // 获取表格所有行
    var index=rows.length;
    var _tr_html=
    	'<tr id="">'+
	    	'<td><label class="checkbox-inline i-checks"><input type="checkbox" name="checkbox_index" value="'+index+'"><span style="margin-left: 5px;">'+index+'</span></label></td>'+
			'<td>事项'+index+'</td>'+
	    	'<td>资金计划（元）'+index+'</td>'+
	    	'<td>备注'+index+'</td>'+
    	'</tr>';
	$("#items_table_body").append(_tr_html);
}

2.删除事项 javascript:del_tr()

• 获取勾选行
• 遍历删除选中行
• 重置索引值，表的第一列1，2，3...

function del_tr(){
	$('input[name="checkbox_index"]:checked').each(function(index,element){
		$('#items_table_body').children().eq(this.value-1-index).remove();
	})
    resetFilesIndex();//重置索引
}
function resetFilesIndex(){
    var tb = document.getElementById('items_table');    // table 的 id
    var rows = tb.rows;                           // 获取表格所有行
    for (var i = 1; i < rows.length; i++) {
    	var _td_html='<label class="checkbox-inline i-checks"><input type="checkbox" name="checkbox_index" value="'+i+'"><span style="margin-left: 5px;">'+i+'</span></label>';
    	rows[i].cells[0].innerHTML=_td_html;
    }
}

注意点：

1. 规避删除时的索引，遍历选中行时（-index）

后续：

1. 动态添加checkbox控件是，需要重新渲染
2. <td></td>内的文本框输入控件，后期添加监听事件，做数据校验，table左上角统计的自动计算