<!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. WEB安全的历史

    exp  ===  exploit     漏洞利用代码 中国 黑客发展的 几个阶段  启蒙时代  ,黄金时代 ,黑暗时代 启蒙时代  -- 大致在 20世纪 19年代 中国互联网刚起步  一些青年收 ...

  2. __new__与__init__的区别和应用场景

    创建实例的时候, 先运行的_new_方法, _new_创建对象 Student object(实例)返回给 _init_ 里面的第一个参数self class Student(object): def ...

  3. vimrc备个份

    set mouse=a set number set smartindent set expandtab set tabstop=4 set shiftwidth=4 set hlsearch set ...

  4. python while指令

    while指令 1.它后面可以带一个 Ture 表示一直是真的,这样程序会在while循环里无限进行下去 eg: while Ture: print("打印这个...") 2.它后 ...

  5. Unity 简记（2）--2D移动

    目录 1.输入 1.1直接检测按下哪个按键 1.2.检测水平输入和垂直输入 2.移动 2.1.Transform组件 2.2.RigidBody组件 2.3.NavMeshAgent组件 2.4.Ch ...

  6. Hybrid App: 看看第三方WebViewJavascriptBridge是如何来实现Native和JavaScript交互

    一.简介 在前面两篇文章中已经介绍了Native与JavaScript交互的几种方式,依次是JavaScriptCore框架.UI组件UIWebView.WebKit框架,这几种方式都是苹果公司提供的 ...

  7. Javascript模块化开发2——Gruntfile.js详解

    一.grunt模块简介 grunt插件,是一种npm环境下的自动化工具.对于需要反复重复的任务,例如压缩.编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.grunt模块根据 ...

  8. NW.js打包一个桌面应用

    1.安装nw(可以到官网:https://nwjs.io下载) npm install nw -g 2.创建一个最最简单的nw应用 在nwjs文件夹中 新建index.html和package.jso ...

  9. PHP实现日历签到，并实现累计积分功能

    在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到,因为没有经验所有走了很多弯路,再次记录过程和步骤. 1.日历签到样式:使用的是calendar ...

  10. [TCP] TCP协议族的学习 and TCP协议

    1.TCP协议族这个大家庭,每个协议在OSI5层模型中所处的位子 其中,网络层里的 ICMP = Internet Control Message Protocol,即因特网控制报文协议, IGMP ...