tab切换 以及 jquery追加与移除

原创 2016年08月31日 08:03:44
<!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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery动态增删tab选项卡

  • 2017年10月26日 22:20
  • 70KB
  • 下载

利用jquery给指定的table动态添加一行、删除一行

$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取...
  • GarfieldEr007
  • GarfieldEr007
  • 2016年09月02日 13:06
  • 5028

jquery动态增减选项卡

jquery动态增减选项卡
  • love_xiolan
  • love_xiolan
  • 2016年10月12日 11:52
  • 2098

多iframe使用tab标签方式添加、删除、切换的处理实例

紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案      如果采用iframe来切换显示内容的方式来展现办公Web。那么需要解决几个问题   1.tab标签需要...
  • chen_hua89
  • chen_hua89
  • 2016年03月08日 09:25
  • 3553

AngularJs:动态添加和删除选项卡

从左边的菜单栏,每点击一个选项,右边内容区域添加一个选项卡,选项卡可关闭。 左边菜单布局文件 ...
  • ren_qin
  • ren_qin
  • 2015年03月09日 20:34
  • 6175

JQuery 样式设置、追加、移除与切换

获取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p")....
  • cui_angel
  • cui_angel
  • 2012年07月12日 15:26
  • 28831

JQuery 样式设置、追加、移除与切换

获取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下: varp_class = $("p").a...
  • yzl21061
  • yzl21061
  • 2013年12月18日 18:13
  • 360

jquery滑动切换tab

  • 2014年10月27日 16:09
  • 42KB
  • 下载

jquery选项卡插件多种tab标签切换效果

  • 2014年12月08日 16:30
  • 171KB
  • 下载

采用jQuery设计的图片列表tab切换选项卡

  • 2014年11月27日 09:20
  • 106KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:tab切换 以及 jquery追加与移除
举报原因:
原因补充:

(最多只允许输入30个字)