<!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. Python实战练习——打印日历教程

    很长一段时间没有接触过C语言了,想来做这一行当已经有三两年了. 今天突然想起来以前用C语言在VC6上写代码的日子,想了想以前的一些实战练习. 所以今天打算用Python来写一个C语言以前练习的题目-日 ...

  2. [2018-01-12] laravel--路由(路由与控制器)

    路由只用来接收请求 目前我们大致了解了laravel,在开始一个Http程序需要先定义路由.之前的例子中,我们的业务逻辑都是在路由里实现的,这对于简单的网站或web应用没什么问题,当我们需要扩大规模, ...

  3. 7.25 NOIP模拟8

    这次考试前面状态还行,后两个小时真是一言难尽,打了个T3的n^2暴力就懵逼了,不知道怎么优化. T1.匹配 看了一边题发现不太懂(这不是考试的难度啊),然后水完T2后回来5分钟水过,非常愉快的一道题. ...

  4. Android开发中常用的设计模式

    首先需要说明的是,这篇博文灵感来自于 http://www.cnblogs.com/qianxudetianxia/archive/2011/07/29/2121547.html ,在这里,博主已经很 ...

  5. python学习之【第十四篇】：Python中的装饰器

    1.什么是装饰器? 器即函数 装饰即修饰,意指为其他函数添加新功能 装饰器定义:本质就是函数,功能是为其他函数添加新功能 2.遵循的原则 装饰器必须遵循以下两个原则: 不修改被装饰函数的源代码(开放封 ...

  6. 「NOIP模拟赛」数位和乘积（dp，高精）

    统计方案数,要么组合数,要么递推(dp)了. 这是有模拟赛历史以来爆炸最狠的一次 T1写了正解,也想到开long long,但是开错了地方然后数组开大了结果100->0 T3看错题本来简单模拟又 ...

  7. python基础-闭包函数和装饰器

    闭包函数和装饰器 闭包函数 概念:在函数中(嵌套)定义另一个函数时,内部函数引用了外层函数的名字. 特性 闭包函数必须在函数内部定义 闭包函数可引用外层函数的名字 闭包函数是函数嵌套.函数对象.名称空 ...

  8. 算法编程题积累（3）——腾讯笔试"构造回文“问题

    首先理解题意,回文串的特点:倒序后跟原串相同.故而可以将原串看成向一个回文串在任意位置添加任意字符后形成的字符串,也就是说原串中存在一段未必连续的回文序列. 通过分析可以知道AC本题的核心思路:求出回 ...

  9. Ansibile之playbook初识

    一.playbook简介 ansiblie的任务配置文件被称为playbook,俗称“剧本”,每一个剧本(playbook)中都包含了一系列的任务,这每个任务在ansible中又被称为“戏剧”(pla ...

  10. Unity 横版2D移动跳跃问题——关于一段跳与二段跳

    1.初始条件: 1.角色只绑定一个碰撞体,移动时施加力或给予速度,用跳跃次数JumpTimes或者bool值OnGround判断是否在地面. 2.只用一个tilemap搭建2D场景,因此所有tilem ...