技術標籤：tablejqueryjqueryjavascripthtml

先上效果圖：

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>
 

使用場景：物品詳情和編輯 、績效考核專案等