jquery实现网页自动添加必填项图标和日期自动填充

最新推荐文章于 2022-04-23 22:32:19 发布

java爱好者

最新推荐文章于 2022-04-23 22:32:19 发布

阅读量5.1k

点赞数

分类专栏： java web 文章标签： jquery class function date 文档

本文链接：https://blog.csdn.net/afgasdg/article/details/7729308

版权

java web 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

<html>
<head>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type="text/javascript">
$(function(){
	//如果是必填的，则加红星标识.
	$("form label.required").each(function(){
		var $required = $('<font color="red">*</font>'); //创建元素
		$(this).after($required); //然后将它追加到文档中
	});
	
	//自动填充日期,addDay 日加，addMonth 月加，addYear 年加
	$("input.autoFillDate").each(function(i){
		$(this).val(autoFillDate($(this).attr("addYear"),$(this).attr("addMonth"),$(this).attr("addDay")));
	});
});

//自动填充日期
function autoFillDate(year,month,day){
	var myDate= new Date();
	if(year){
		myDate.setFullYear(myDate.getFullYear()+parseInt(year));
	}
	if(month){
		myDate.setMonth(myDate.getMonth()+parseInt(month));
	}
	if(day){
		myDate.setDate(myDate.getDate()+parseInt(day));
	}
	var month = myDate.getMonth()+1;
	var day = myDate.getDate();
	return myDate.getFullYear()+"-"+((month+"").length == 1 ? "0"+month : month)+"-"+((day +"").length == 1 ? "0"+day : day);
}
</script>
</head>

<body>

	<form>
		<table boder ="1">
		<tr>
			<td>
				<label class="required">姓名:</label>
			<td>
			<td>
				<input type="text" />
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">日期:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate"/>
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">年加一:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate" addYear="1"/>
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">月加一:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate" addMonth="1"/>
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">日加一:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate" addDay="1"/>
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">都加一:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate" addYear="1" addMonth="1" addDay="1"/>
			</td>
		</tr>
	</form>

</body>
</html>

运行效果图：