JQuery动态添加控件并取值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery动态添加控件并取值-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<input type="button" onclick="add()" value="增加">
<input type="button" onclick="query()" value="查看">
<ul>
<li><span>A:</span>
<input type="checkbox">
<input type="text">
<input type="button" class="del" value="删除">
</li>
<li><span>B:</span>
<input type="checkbox">
<input type="text">
<input type="button" class="del" value="删除">
</li>
<li><span>C:</span>
<input type="checkbox">
<input type="text">
<input type="button" class="del" value="删除">
</li>
<li><span>D:</span>
<input type="checkbox">
<input type="text">
<input type="button" class="del" value="删除">
</li>
</ul><script>
$(document).ready(function() {
init();
});
//初始4个选项
var num = 4;
//添加选项
function add() {
// alert(num)
//添加一行,num加一
num++;
//通过知道当前有的按钮数算出选项名
var str = String.fromCharCode(64 + num);
//编辑新选项的html代码
var $li = $("<li>" + "<span>" + str + ":</span> " + " <input type=\"checkbox\"/>" + " <input type=\"text\" class=\"str\"/>" + " <input type=\"button\" class=\"del\" value=\"删除\"/></li>");
//将新的一行添加到<ul>中
var $parent = $("ul");
$parent.append($li);
//因为添加了新的选项需要重新绑定按钮
init();
}
function query() {
// alert(num)
var str = "";
var str1 = "";
//for循环查询已有控件的输入值
for (var i = 0; i < num; i++) {
var a = $("ul li:eq(" + i + ") :text").val();
var b = $("ul li:eq(" + i + ") :checkbox").is(':checked');
var j = i + 1;
str += "第" + j + "个文本框输入:" + a;
str1 += "第" + j + "个复选框选中:" + b;
}
alert(str);
alert(str1);
}
//绑定每个ul li下的删除按钮
function init() {
//这里其实用ul li input :button就可以,但是给按钮加一个class方便用css给按钮添加样式,这里本人比较懒没有添加样式。
$("ul li input.del").unbind("click").click(function() {
//$(this).parent().remove();链式操作,$(this)为该按钮本事,parent()为其父元素即<li>,调用renmove()将整个<li>节点删除
$(this).parent().remove();
//alert(num)
//for循环刷新列表,因为考试往往用ABC,所以利用ascii码通过获取当前控件的索引来转换成对应的英文字母,
for (var i = 0; i < num - 1; i++) {
//ascii码65对应的A,65加上当前索引值再转成字符即可
var str = String.fromCharCode(65 + i) + ":";
//定位到每个<li>下的<span>节点,将选项号刷新到页面
$("ul li:eq(" + i + ") span").html(str);
}
//删除一行,num减一
num--;
});
}</script>
</body>
</html>
JQuery动态添加控件并取值的更多相关文章
- Jquery 动态追加控件并获取值
先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- winform导入导出excel,后台动态添加控件
思路: 导入: 1,初始化一个OpenFileDialog类 (OpenFileDialog fileDialog = new OpenFileDialog();) 2, 获取用户选择文件的后缀名(s ...
- VC中动态添加控件
VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...
- asp.net动态添加控件学习
看了老师的教程后,自己一点感悟记录下来: 1.在页面提交后,动态生成的控件会丢失, 但如果生成控件的代码在pageload中,就可以,原理是每次生成页面都执行生成. 2.动态按件或页面原来控件, 在页 ...
- WPF-学习笔记 动态修改控件Margin的值
原文:WPF-学习笔记 动态修改控件Margin的值 举例说明:动态添加一个TextBox到Grid中,并设置它的Margin: TextBox text = new TextBox(); t_gri ...
- WPF 动态添加控件以及样式字典的引用(Style introduction)
原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的 ...
- Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
- WPF:理解ContentControl——动态添加控件和查找控件
WPF:理解ContentControl--动态添加控件和查找控件 我认为WPF的核心改变之一就是控件模型发生了重要的变化,大的方面说,现在窗口中的控件(大部分)都没有独立的Hwnd了.而且控件可以通 ...
随机推荐
- Mybatis:配置解析
配置解析 mybatis-config.xml(Mybatis核心配置文件)深深影响了Mybatis行为的设置和属性信息. 能配置的的内容 当然,并不是所有都是我们经常使用到的,下面选择经常使用的配 ...
- [07/18NOIP模拟测试5]超级树
鬼能想到的dp定义:dp[i][j]表示在一棵i级超级树中,有j条路径同时存在且这j条路径没有公共点时,可能的情况数 刚开始我也没看懂,所以举个例子 如一个2级的超级树,父节点为1,左右儿子为2,3 ...
- ASP.NET Core 3.0 gRPC 拦截器
目录 ASP.NET Core 3.0 使用gRPC ASP.NET Core 3.0 gRPC 双向流 ASP.NET Core 3.0 gRPC 拦截器 一. 前言 前面两篇文章给大家介绍了使用g ...
- CHRONY 时间服务器
时间同步服务chrony ntp network time Protocol之前使用的同步协议 chrony ntp协议的实现,兼容网络中的ntp服务(centos7之后就不再使用ntp,转而使用ch ...
- 爬虫学习--Requests库详解 Day2
什么是Requests Requests是用python语言编写,基于urllib,采用Apache2 licensed开源协议的HTTP库,它比urllib更加方便,可以节约我们大量的工作,完全满足 ...
- L0、L1、L2范数正则化
一.范数的概念 向量范数是定义了向量的类似于长度的性质,满足正定,齐次,三角不等式的关系就称作范数. 一般分为L0.L1.L2与L_infinity范数. 二.范数正则化背景 1. 监督机器学习问题无 ...
- java中 equals和==区别
一.java当中的数据类型和“==”的含义: 基本数据类型(也称原始数据类型) :byte,short,char,int,long,float,double,boolean.他们之间的比较,应用双等号 ...
- Java基础 ArrayList源码分析 JDK1.8
一.概述 本篇文章记录通过阅读JDK1.8 ArrayList源码,结合自身理解分析其实现原理. ArrayList容器类的使用频率十分频繁,它具有以下特性: 其本质是一个数组,因此它是有序集合 通过 ...
- 【algo&ds】3.栈和队列
1.堆栈 堆栈(Stack):具有一定操作约束的线性表(只在一端(栈顶,Top)做插入.删除) 先进后出特性 1.1堆栈的抽象数据类型描述 类型名称: 堆栈(Stack) 数据对象集:一个有0个或多个 ...
- Oracle 数据库基础:数据查询与操作
SELECT uname FROM TUser WHERE uname=‘admin’ SELECT 字段名列表 FROM 表名 WHERE 条件; 在Oracle数据库中,对象是属于模式的,每个账户 ...