Table表单可编辑 灵活简单易用

先上效果图：

html代码如下：

<table width="100%">
	<tr>
		<td colspan="4">
			<table>
				<thead>
					<tr>
						<th>考核项目</th>
						<th>考核标准</th>
						<th>权重分</th>
					</tr>
				</thead>
				<tbody id="merit-list">
					<tr>
						<td><input type="input" data-id="project" name="project[]"></td>
						<td><input type="input" data-id="standard" name="standard[]"></td>
						<td><input type="input" data-id="weight_score" name="weight_score[]"></td>
						<td><button id="add-merit" type="button">添加一行</button>
							<button class="del-merit" type="button" style="display: none">删除</button>
						</td>
					</tr>
					<!--可直接循环的数据-->
					<tr>
						<td><input type="input" data-id="project" name="project[]" value="每天仓库货物必须清场"></td>                                  
						<td><input type="input" data-id="standard" name="standard[]"  value="一次没清场扣2分"></td>
						<td><input type="input" data-id="weight_score" name="weight_score[]" value="50.00"></td>
						<td>
							<button class="del-merit" type="button" >删除</button>
						</td>
					</tr>                           
				</tbody>
			</table>
		</td>
	</tr>
</table>

 jquery 代码如下：

<script>
    // 新增按钮
	$(document).on('click', "#add-merit", function(){
		var tr = $(this).parent().parent();
		var if_return = false;
		tr.find('input').each(function(i,o){
			if($(o).val() == 0 ){
				alert(o.name+'参数缺失');
				if_return = true;
				return false;
			}
		})
		if(if_return)
			return false;
		var _tr = tr.clone();
		_tr.find('#add-merit').remove();
		_tr.find('.del-merit').show();
		tr.after(_tr);
		tr.find('input').val('');
	});

	// 删除按钮
	$(document).on('click', ".del-merit", function(){
		$(this).parent().parent().remove();
	});
</script>

使用场景：物品详情和编辑 、绩效考核项目等