jquery点击按钮,添加一行input输入框
时间:2022-07-25
本文章向大家介绍jquery点击按钮,添加一行input输入框,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
功能需求:
点击添加按钮的时候,会添加一行input输入框,使用jquery来实现一下。虽然现在前端开发小伙伴们都不用jquery了,但是,我还是决定要记录一下这个小demo,因为用到的比较多。
示例代码:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div id="timeCont"></div>
<button type="button" class="btn blue" id="fatBtn">新增区域</button>
<script type="text/javascript">
/* 新增检测时间 */
$("#fatBtn").click(function() {
var htm = "";
htm += "<div class='form-group'>";
htm += "<label class='col-sm-3 control-label' >区域监测时间段:</label>";
htm += "<div class='col-sm-4'>";
htm += "<input type='text' class='form-control sleepStart1' name='startTime' value='09:00' ></input>";
htm += "</div>";
htm += "<div class='col-sm-4'>";
htm +="<input type='text' class='form-control sleepStop1' name='stopTime' value='17:00'></input>";
htm += "</div>";
htm += "</div>";
$('#timeCont').append(htm);
});
</script>
</html>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Launcher 启动 activity 流程
- 【每日一题】29. Divide Two Integers
- Ubuntu19.1 中 GitLab 的安装配置与卸载
- Linux 中的存储结构与磁盘划分
- Linux 中用户与权限管理
- Netty入门教程——认识Netty
- 14.VBA处理xml文件
- 一文带你理解Spring Cloud高并发微服务架构核心理念的五脏六腑
- Ubuntu设置定时任务——每10秒钟执行一次命令(修改文件权限)
- 多线程爬虫入门及问题解决(爬取表情包)
- 10.带人机对战的五子棋程序
- Spring Boot、 Spring Cloud 、OAuth2 的RBAC 权限管理系统分享
- 完美解决个人微信音频amr文件与mp3格式互转
- 【学不动了系列】之 Deno 入门 什么是Deno安装DenoDeno运行时(Runtime)Deno标准库第三方模块
- SAUI-瀑布流改版(grid)