E01-前端整合：【案例】添加数据页面

最新推荐文章于 2022-12-07 17:43:20 发布
最新推荐文章于 2022-12-07 17:43:20 发布
阅读量278 收藏
点赞数
分类专栏： 前端 文章标签： 前端 小练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58086930/article/details/127183559
版权
  • HTML
  • CSS
  • JavaScript,jQuery
  • BootScript（动态效果依赖于jQuery)

案例：添加数据页面

人员信息录入功能，需要提供用信息：

用户名，年龄，薪资，部门，入职时间（*）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发版本用这个【很大】 -->
		<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
		<!-- 生产产本用这个【压缩了】 -->
		<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">
		
		<link rel='stylesheet' href="static/plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.css"/>
	</head>
	<body>
		<div class="container">
			<form class="form-horizontal"  style="margin-top: 20px;">
				<div class="row clearfix">
					<div class="col-xs-6">
						<div class="form-group">
						  <label class="col-sm-2 control-label">姓名</label>
						  <div class="col-sm-10">
						    <input type="text" class="form-control" placeholder="姓名">
						  </div>
						</div>
					</div>
					
					<div class="col-xs-6">
						<div class="form-group">
						  <label class="col-sm-2 control-label">年龄</label>
						  <div class="col-sm-10">
						    <input type="text" class="form-control" placeholder="年龄">
						  </div>
						</div>
					</div>
				</div>
				
				
				<div class="row clearfix">
					<div class="col-xs-6">
						<div class="form-group">
						  <label class="col-sm-2 control-label">薪资</label>
						  <div class="col-sm-10">
						    <input type="text" class="form-control" placeholder="薪资">
						  </div>
						</div>
					</div>
					
					<div class="col-xs-6">
						<div class="form-group">
						  <label class="col-sm-2 control-label">部门</label>
						  <div class="col-sm-10">
							  <select class="form-control">
								  <option>IT部门</option>
								  <option>销售部门</option>
								  <option>运营部门</option>
							  </select>
						  </div>
						</div>
					</div>
					
				</div>
				
				
			  <div class="row clearfix">
				<div class="col-xs-6">
					<div class="form-group">
					  <label class="col-sm-2 control-label">入职日期</label>
					  <div class="col-sm-10">
					    <input type="text" id='datetime' class="form-control" placeholder="入职日期">
					  </div>
					</div>
				</div>
				
			  </div>
			  
			  <div class="row clearfix">
				<div class="col-xs-6">
					<div class="form-group">
					  <div class="col-sm-offset-2 col-sm-10">
					    <button type="submit" class="btn btn-primary">提 交</button>
					  </div>
					</div>
				</div>		
			  </div>
			  
			</form>
		</div>
		
		
		<script src="static/js/jquery-3.6.1.min.js"></script>
		<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js""></script>
		<script src="static/plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
		<script src='static/plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js'></script><!-- 中文包 -->
		
		<script>
			$(function(){
				$('#datetime').datetimepicker({
					language: 'zh-CN', //显示中文
					format: 'yyyy-mm-dd', //显示格式
					autoclose: true, //选中自动关闭
					todayBtn: true, //显示今日按钮
					todayHighlight: true, // 今日高亮显示
					weekStart: 1, //一周从哪一天开始。0（星期日）到6（星期六）	
					startDate: "2021-1-1", //日期选取的起始时间
					minView: "month", // 最小视图为月份，如果为 day 的话还会让你选小时
					daysOfWeekDisabled: '0', // 哪天不可选 0（星期日）到6（星期六）	
					endDate: new Date(), //日期选取的截止时间，因为入职日期最多填写到今天，所以可以直接用new Date()，表示当天
	
				})
			})
		</script>
		
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<link rel="stylesheet" href="static/plugins/bootstrap/css/bootstrap.min.css">
		<script src="static/js/jQuery.js"></script>
		<script src="static/plugins/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet"
			href="static/plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
		<script src="static/plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
		<script src="static/plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js">
		</script>
	</head>
	<body>
		<form class="form-horizontal" style="border: 1px red solid;margin-top: 30px;">
			<div class="container">
				<div class="row">
					<div class="form-group col-sm-6">
						<label for="name" class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-10">
							<input type="text" id="name" class="form-control">
						</div>

					</div>
					<div class="form-group col-sm-6">
						<label for="age" class="col-sm-2 control-label">年龄</label>
						<div class="col-sm-10">
							<input type="text" id="age" class="form-control">
						</div>

					</div>
				</div>
				<div class="row">
					<div class="form-group col-sm-6">
						<label for="salary" class="col-sm-2 control-label">薪资</label>
						<div class="col-sm-10">
							<input type="text" id="salary" class="form-control">
						</div>

					</div>
					<div class="form-group col-sm-6">
						<label for="department" class="col-sm-2 control-label">部门</label>
						<div class="col-sm-10">
							<select id="department" class="form-control">
								<option value="">IT</option>
								<option value="">教育</option>
								<option value="">服务</option>
								<option value="">公检</option>
								<option value="">托管</option>
							</select>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-sm-6">
						<label for="datetime" class="col-sm-2 control-label">入职日期</label>
						<div class="col-sm-10">
							<input type="text" id="datetime" class="form-control" placeholder="年 / 月 / 日">
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-sm-6">
						<div class="col-sm-offset-2 col-sm-3">
							<button type="submit" class="btn btn-primary form-control">提交</button>
						</div>
					</div>
				</div>
			</div>
		</form>


		<script type="text/javascript">
			$('#datetime').datetimepicker({
				language: 'zh-CN', //显示中文
				format: 'yyyy-mm-dd', //显示格式
				autoclose: true, //选中自动关闭
				todayBtn: true, //显示今日按钮
				todayHighlight: true, // 今日高亮显示
				weekStart: 1, //一周从哪一天开始。0（星期日）到6（星期六）	
				startDate: "2021-1-1", //日期选取的起始时间
				minView: "month", // 最小视图为月份，如果为 day 的话还会让你选小时
				daysOfWeekDisabled: '0', // 哪天不可选 0（星期日）到6（星期六）	
				endDate: new Date(), //日期选取的截止时间，因为入职日期最多填写到今天，所以可以直接用new Date()，表示当天

			})
		</script>

	</body>
</html>

幼儿园的高财生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数据新增页面处理
weixin_44540195的博客
04-27 1255
开发工具与关键技术：vs2015 多条件查询 作者：懒惰的睿智 撰写时间：4.27 Mvc.net,数据的新增，在新增前需要知道要新增什么表向数据库中写入什么数据，里面包含了什么信息，我们需要对数据进行处理。下面我们新增一个表到数据库中，所需要的页面信息处理 如果我们要新增一个表，例如说（员工表）。操作步骤如下 页面操作流程： 1、新增点击事件–>新增模态框弹出，form表单重置。 2...
阶段二-论文项目总结02_前端模块总结
weixin_45732755的博客
11-22 254
02_前端模块总结
首页数据展示前端页面
qq_46112274的博客
06-05 1659
首页数据展示前端页面1、首页前端实现1.1、封装api请求，用户调用后端接口1.1.1、创建api文件夹，创建/api/hosp/hosp.js1.1.2、创建/api/cmn/dict.js用于调取数据字典中的值1.2、添加组件，用于页面显示1.3、在index.vue页面中编写js代码，用于实现数据在页面的显示 1、首页前端实现 1.1、封装api请求，用户调用后端接口 1.1.1、创建api文件夹，创建/api/hosp/hosp.js import request from '@/utils/re
批量添加数据的表单界面（表单含树形下拉框）vue + element
fulai0_0的专栏
03-24 3373
1、批量保存多组数据。（表单含有树形下拉框） 2、支持删除数据 3、支持对数据进行表单检验
数据库操作
weixin_50354430的博客
10-26 128
首先创建登录页面 <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <form role="form" method="post" action="index.jsp"> <div class="form-group">
vue新增页面开发方法简单总结
BHSZZY的博客
12-07 4630
实际工作中，一般只是新增/修改已有vue项目的页面，很少从零开始搭建一个新的vue项目。 在此简要总结下新增页面的开发方法。1.首先找一个相似的页面，复制一份，修改为不同的名称。 (1)例如，有一个页面，位于这个文件夹： 其中有3个文件： 访问路径是： (2)可以把这个文件夹整个复制，放在相同的目录下，文件夹重命名为，其中也是包含这3个文件。 这样，就可以用以下路径访问到： 2.新文件夹中，一般不用修改，只修改文件即可。3.如果要在其它页面新增按钮，跳转到这个新页面，可以参考以下方法： 说明： 例如，在页
DS28E01-100_drv_C.zip_DS28E01_ds28e01-100_hardhcm
07-15
描述中的 "ds28e01-100 driver code" 明确指出这是一个用于该传感器的驱动代码，意味着这个压缩包包含的是一系列与编程相关的文件，用于在嵌入式系统中控制和读取DS28E01-100传感器的数据。 DS28E01是一款基于单线...
DS28E01-100-C-code.zip_28E01_ds28e01-100_ds28e01加密芯片_ds28e01芯片代码
07-14
加密芯片DS28E01-100是一款由Maxim Integrated公司生产的单芯片安全解决方案，主要用于提供数据保护和身份验证。这款芯片以其强大的安全特性，如数字签名和SHA（安全散列算法）功能，被广泛应用在各种领域，如物联网...
E01.-ExamenUnidad1：Examen Guzman Morales
02-13
7. **表格**：学习、（行）、（数据单元格）和（表头）的使用，以及表格的合并和分隔。 8. **HTML5的新特性**：如、、、等语义化标签，以及音频和视频元素的使用。 9. **响应式设计**：虽然初级，但理解媒体查询@...
谷歌师兄的leetcode刷题笔记-dojo-s03e01-parse-url:dojo-s03e01-parse-url
06-30
s03e01 问题：解析 URL 给定一个 URL，开发一个程序来指示 URL 是否有效，如果有效，则返回其组成部分。 例子： 输入： 输出：协议：http 主机：www 域：google.com 路径：邮件参数：user=so 等等 条目：ssh://so so...
DS28E01-100_cn.pdf
06-17
DS28E01-100中文手册
1新建一个vue前端页面
m0_46430862的博客
07-22 198
建立新的页面
添加数据，前台页面
RNG1433223的博客
07-17 296
addSubmit(){ this.$refs.pageForm.validate((valid) => { if (valid) { this.$confirm('确认提交吗？', '提示', {}).then(() => { cmsApi.page_add(this.pageForm).then((res) => { console.log(res);
HTML 添加数据信息
MOONCOM的博客
01-19 5088
代码如下： Title *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;} li{ list-style-type: none;} html,body{
HTML页面添加内容的方法
hu_lanlan的博客
08-27 4142
html方法 var text1 = "<p>这里是要添加的内容</p>"; DOM方法 var text2 = document.createElement("p"); text2.innerHTML = "这里是要添加的内容"; JQuery方法 var text3 = $("<p></p>").text("这里是要添加的内容");
页面新增数据
weixin_44554027的博客
07-08 517
页面新增数据 开发工具与关键技术：Visual Studio 2015 MVC 作者：郭海明 撰写时间：2019年7 月 5日 给大家分享一个做项目遇到的一个页面新增数据的方法，首先我们先用数据表格将要查询的数据查询出来， 我们可以在页面上添加一个新增的按钮或者新增的图片，这里我使用的是图片， 当我们点击上方的加号按钮，就直接跳转的新增页面。 新增页面里面写好数据的下拉框的ID或要添加表字段的...
前端添加数据
wandering010的博客
08-12 2967
文章目录前端添加数据页面图片添加页面form表单（注意：不能为空的字段和有非空判断的字段,button按钮跳转也需要注意：）后端代码参考整个代码dao层controller层 前端添加数据 页面图片 添加页面 form表单（注意：不能为空的字段和有非空判断的字段,button按钮跳转也需要注意：） <form class="layui-form" action="/add1"> <div class="layui-form-item">
使用js向HTML页面动态添加数据（一）
qq_42477391的博客
12-23 3334
需求：JQuery请求的后端多个数据后，赋值给前端页面，以列表的形式展示出来 完成的简单模板 <html> <head> <script src="G:/js/jquery-3.5.1.js"></script> <script> $(function(){ var html = $("#div0").html(); $("#btn").click(function(){
ds28e01-100
最新发布
09-07
DS28E01-100是一款一线制温度传感器，它基于数字信号提供温度测量。该传感器采用了微处理器技术，具有高精度和稳定性，并且适用于广泛的应用领域。 DS28E01-100可以通过串行数字接口进行通信，使用1-Wire总线协议。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值