jq操做table追加td

時間 2020-05-09

原文原文鏈接

##示例 ##代碼css

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
	</head>
	<style type="text/css">
		.well {
			font-weight: 600;
			position: relative;
			height: 22px;
		}
		.add {
			margin-left: 15px;
			position: absolute;
			cursor: pointer;
		}
	</style>
	<body>
		<table style="width:100%;border: 1px solid #ccc;" border="1" cellspacing="0" cellpadding="6" id="table1">
			<tr>
				<td align="center">1day</td>
				<td align="center" class="well">景點 <span class="add">+</span></td>
				<td align="center" rowspan="5">小計</td>
			</tr>
		</table>
	</body>
	<script>
		$(document).ready(function() {
			$(".add").click(function() {
				$(this).parents('tr').after('<tr><td class="well"></td></tr>');   //1，追加tr
				var num = $(this).parent().prev().attr('rowspan') ? $(this).parent().prev().attr('rowspan') : //2，判斷第一個td有沒有rowspan的屬性
				$(this).parent().prev().attr('rowspan', num + 1);  //左側的
				$(this).parent().next().attr('rowspan', num + 1); //右側的
			})
		})
	</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。