tab切换以及 jquery追加与移除

最新推荐文章于 2023-04-24 09:02:13 发布

ztblog

最新推荐文章于 2023-04-24 09:02:13 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ztblog/article/details/52381408

本文展示了如何使用HTML、CSS和jQuery实现一个简单的后台文章管理界面，包括Tab切换、动态添加和移除内容表单的交互功能。用户可以通过点击按钮在基本设置和数据添加两个选项之间切换，同时可以添加最多10条数据，每条数据包含标题、内容和图片字段。添加新条目时，表格会动态插入新行，而删除条目则会移除相应行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台文章管理</title>
	<script src='../js/jquery-1.4.4.min.js'></script>
	<script src='../js/ajaxfileupload.js'></script>
</head>
<body>
		
		<h1 align="center">资讯设置</h1>
		<div align="center" id="tab">
			<span><button>基本设置</button></span>
			<span><button>数据添加</button></span>
		</div>
		<div id="contents"> 
			<div align="center" class="cont">
			<form action="article.php" method="post">
			<table>
				<tr>
				<td>模板标题</td>
				<td><input type="text" value="资讯排行" name='title'></td>
				<td><input type="radio" name='is_display' value="on">不显示模板标题</td>
				<td><input type="radio" name='is_display' value="yes">显示模板标题</td>
				</tr>
				<tr>
					<td>显示数量</td>
					<td><input type="text" value="10" name='line'>条</td>
				</tr>
				<tr>
					<td>标题字数</td>
					<td><input type="text" value="6" name='word_number'>字</td>
				</tr>
				<tr>
					<td><input type="submit" name="data" value="保存"></td>
				</tr>
			</table>
			</form>
			</div>
		</div>
		<div id="contents"> 
			<div align="center" class="cont" style="display:none">
			<form action="article.php" method="post" enctype="multipart/form-data">
			<table>
				<tr>
					<td>标题</td>
					<td>内容</td>
					<td>图片</td>
					<td><input type="button" value="新增" id="add"></td>
				</tr>
				<tr id="content" class="he">
					<td><input type="text" name="title[]"></td>
					<td><input type="text" name="content[]"></td>
					<td><input type="file" name="thumb"></td>
					<td><a href="javascript:void(0)" class="del">x</a></td>
				</tr>	
				<tr>
					<td><input type="submit" name="set" value="提交"></td>
				</tr>
			</table>
			</form>
			</div>
		</div>
</body>
</html>
<script>
	//tab切换
	$("#tab span").click(function(){
		var idx=$(this).index();
		$(".cont").hide();
		$("#contents div").eq(idx).show();
	})
	//追加
	$("#add").live("click",function(){
		var tr='';
		tr += '<tr id="content" class="he">'
		tr += '<td><input type="text" name="title[]"></td>'
		tr += '<td><input type="text" name="content[]"></td>'
		tr += '<td><input type="file" name="img[]"></td>'
		tr += '<td><a href="javascript:void(0)" class="del">x</a></td>'
		tr += '</tr>'
		$("#content").after(tr);	
		var str=$(".he").size();
		if(str>9)
		{
			alert("只可以添加10条");
			return false;
		}
	})	
	//移除
	$('.del').live('click',function(){
		var str=$(".del").size();
		if(str<2)
		{
			alert("不能删了");
			return false;
		}
		$(this).parent().parent().remove();
	})
		
</script>