<!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动态添加控件并取值的更多相关文章

  1. Jquery 动态追加控件并获取值

    先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...

  2. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  3. winform导入导出excel，后台动态添加控件

    思路: 导入: 1,初始化一个OpenFileDialog类 (OpenFileDialog fileDialog = new OpenFileDialog();) 2, 获取用户选择文件的后缀名(s ...

  4. VC中动态添加控件

    VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...

  5. asp.net动态添加控件学习

    看了老师的教程后,自己一点感悟记录下来: 1.在页面提交后,动态生成的控件会丢失, 但如果生成控件的代码在pageload中,就可以,原理是每次生成页面都执行生成. 2.动态按件或页面原来控件, 在页 ...

  6. WPF－学习笔记 动态修改控件Margin的值

    原文:WPF-学习笔记 动态修改控件Margin的值 举例说明:动态添加一个TextBox到Grid中,并设置它的Margin: TextBox text = new TextBox(); t_gri ...

  7. WPF 动态添加控件以及样式字典的引用(Style introduction)

    原文:WPF 动态添加控件以及样式字典的引用(Style introduction) 我们想要达到的结果是,绑定多个Checkbox然后我们还可以获取它是否被选中,其实很简单,我们只要找到那几个关键的 ...

  8. Android 在布局容器中动态添加控件

    这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

  9. WPF：理解ContentControl——动态添加控件和查找控件

    WPF:理解ContentControl--动态添加控件和查找控件 我认为WPF的核心改变之一就是控件模型发生了重要的变化,大的方面说,现在窗口中的控件(大部分)都没有独立的Hwnd了.而且控件可以通 ...

随机推荐

  1. Java 干货之深入理解Java内部类

    可以将一个类定义在另一个类或方法中,这样的类叫做内部类 --<Thinking in Java> 说起内部类,大家并不陌生,并且会经常在实例化容器的时候使用到它.但是内部类的具体细节语法, ...

  2. Go defer使用

    defer使用语法 //defer后面必须是函数调用语句或方法调用语句,不能是其他语句,否则编译器会出错. package main import ( "fmt" ) func f ...

  3. 设计模式之代理模式（Java）

    简介 代理模式出场率真的相当的高,几乎所有框架中无一例外都用到了代理模式,所以了解一下收益还是很高的. 代理模式是什么 如果用一句话来描述代理模式: 代理模式就是为其他对象提供一种代理以控制对被代理对 ...

  4. NOIP模拟 33

    苏轼三连一脸懵逼 然而既惨者就是没素质 T1是正解思路 然而因为直接从暴力修改过来并且忘了把求约数改成求质约数并且由于快速幂打的有缺陷等 没 有 A C ! 如 果 A C rank1就是俺的了! ( ...

  5. jmeter-手机号验证注册登录

    1.测试计划->线程组 2.首先获取需要注册的手机号,获取手机号的方式如下 (1)使用配置元件导入需要注册的手机 ·右键线程组-->配置元件-->CSV数据文件设置,如图: (2)使 ...

  6. 原生JS封装_new函数，实现new关键字的功能

    1.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生 ...

  7. P4799 [CEOI2015 Day2]世界冰球锦标赛（折半暴搜）

    题目很明确,不超过预算的方案数.两个直觉:1.暴搜2.dp 每个点两种状态,选或不选.... 1.可过20% 2.可过70% 正解:折半搜索(meet in the middle) 有点像以前的双向广 ...

  8. Hybrid App: 了解JavaScript如何与Native实现混合开发

    一.简介 Hybrid Development混合开发是目前移动端开发异常火热的新兴技术,它能够实现跨平台开发,极大地节约了人力和资源成本.跨平台开发催生了很多新的开源框架,就目前而言,在混合开发中比 ...

  9. node.js评论列表和添加购物车数据库表创建

    2.1:评论列表--发表评论 用户点击新闻列表某一条新闻,看到新闻详细发表评论 -用户输入评论内容 -发表评论 [将用户评论内容保存数据库 xz_comment] 2.2:评论列表--发表评论-开发评 ...

  10. C语言:互质

    今天遇到一道奇怪的程序题,和平常的不同.同样都是互质,但是一般的题目都是判断两个数字是否互质,但这道题则是给定一个数字n,要求输出所有小于等于n的与n互质的数,题目已经在下面给出: 质数与互质概念不是 ...