基于Jquery的表格的动态增加删除

枫叶梨花

已于 2023-07-17 10:00:50 修改

阅读量461

点赞数 1

文章标签： jquery

于 2017-11-17 16:06:04 首次发布

本文链接：https://blog.csdn.net/flash_love/article/details/78562521

版权

有时候工作需要就简单记录，其实还是比较简单的，只是简单的JQuery的函数应用。

<!DOCTYPE html>
		<html>
		<head>
			<meta charset="utf-8">
			<title>AddorDeleteTable</title>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		</head>

		<body>
			<input type="text" name="context" id="context">
			<button type="button" onclick="addTable()">ADD</button>
			<table id="baseTable" border="1" cellpadding="2" cellspacing="0" >
				<tr>
						<th>Number</th>
						<th>Content</th>
						<th>Operation</th>
				</tr>
			<table>
		</body>
		<script>
    			function addTable(){
						var baseTable=$("#baseTable");

						//获取序号
						var no=baseTable.find("tr:last td:first").html();
						if(no==null){
							no=0;
						}
						no=Number(no)+Number(1);

						//获取输入内容
						var context=$("#context").val();
						//增加一行
						var tr="<tr>"
								+"<td>"+no+"</td>"
								+"<td>"+context+"</td>"
								+"<td><button type='button' onclick='delTable(this)'>DEL</button></td>"
								+"</tr>";

							baseTable.append(tr);

							//清空输入框
							$("#context").val("");
					}

					function  delTable(obj){
						//alert(obj);
						$(obj).parent().parent().remove();
					}
		</script>
		</html>

效果

这里写图片描述