JQuery动态添加控件并取值

最新推荐文章于 2022-02-24 22:55:48 发布

午餐已过

最新推荐文章于 2022-02-24 22:55:48 发布

阅读量2.1k

点赞数

分类专栏： JQuery 文章标签： jquery 控件动态添加

本文链接：https://blog.csdn.net/My_Way2011/article/details/51858751

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

新做在线考试项目，添加试题时需要动态的添加控件来设置试题内容，之前只是简单的接触些JS,于是弄了本JQuery的书，看了两天做了一个例子，模拟编辑一道多选题的设置，刚开始学，不知道自己做的需不需要改进，希望不足的地方大家提出来。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>
<input type="button" οnclick="add()" value="增加"/>
<input type="button" οnclick="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 type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(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>

需要注意的是

$("ul li input.del").unbind("click").click(function()<span style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"> 这里加了一个unbind，是因为remove把节点删除但是该节点的引用还可以用，所有我点击一次删除按钮，以后再点删除按钮，按钮都是指向之前删除的那一项，所以加了unbind解除绑定可以解决这个问题。</span>

午餐已过

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery动态添加控件并取值

新做在线考试项目，添加试题时需要动态的添加控件来设置试题内容，之前只是简单的接触些JS,于是弄了本Jquery的书，看了两天做了一个例子，模拟编辑一道多选题的设置，刚开始学，不知道自己做的需不需要改进，希望不足的地方大家提出来。 A: B:
复制链接

扫一扫