<!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. [2018-03-06] 基于Django的轻量级CMS Mezzanine搭建笔记

    一丶什么是Mezzanine? 它是基于django的内容管理平台(),组成简单,可扩展性和定制性强,特别是个小型的个人博客系统.它也提供了类似wordpress的管理页面.博客发布.图片展示等功能, ...

  2. The reference to entity "characterEncoding" must end with the ';'

    在配置数据库连接池数据源时,本来没有错误,结果加上编码转换格式后eclipse突然报错: 这是怎么回事? 经过查询,发现这个错误其实很好解决. 首先,原因是: .xml文件中 ‘ & ’字符需 ...

  3. 使用Typescript重构axios(二)——项目起手，跑通流程

    0.系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三)- ...

  4. Xshell和Xftp 安装及使用

    Xshell Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议.Xshell 通过互联网到远程主机的安全连接以 ...

  5. 大数据之路day03--java循环的延申与练习（while 、do-while、for）

    在今天,我突然被一个很尴尬的问题问到了,问题是这样的:说一下java循环的应用场景. 我想很多人一下子听到这样的问题不知道怎么回答,大部分人会去想有什么循环格式,特点是什么.这些都是错误的,在往后的面 ...

  6. pycharm的部分个性化设置及快捷键

    pycharm的个性化设置 下面记录了一些最基础的个性化设置,想要更多的修改设置,可以参考其他博文. file --> settings --> editor -->general ...

  7. PHP判断是否为手机端的方法

    PHP判断是否为手机端的方法 private function ismobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HT ...

  8. html5自动横屏的方法

    html5自动横屏的方法<pre>var evt = "onorientationchange" in window ? "orientationchange ...

  9. Python 基础之 线程与进程

    Python 基础之 线程与进程 在前面已经接触过了,socket编程的基础知识,也通过socketserver 模块实现了并发,也就是多个客户端可以给服务器端发送消息,那接下来还有个问题,如何用多线 ...

  10. 《Java多线程面试题》系列-创建线程的三种方法及其区别

    1. 创建线程的三种方法及其区别 1.1 继承Thread类 首先,定义Thread类的子类并重写run()方法: package com.zwwhnly.springbootaction.javab ...