zoukankan      html  css  js  c++  java
  • Jeasyui 动态添加元素的方法

    我在做项目的过程中自己写了一些动态添加元素的方法

    HTML代码部分

     1 <ul class="contentul">
     2                         <li class="all_li">
     3                             <input type="text" name="Email_0" data-options="required:true,validType:'email'" class="easyui-validatebox inputstyle in1" />
     4                             <input type="text" name="FullName_0" data-options="required:true,validType:'CHS'" class="easyui-validatebox inputstyle in2" />
     5                             <input type="text" name="QQ_0" data-options="required:true,validType:'number'" class="easyui-validatebox inputstyle inqq" />
     6                             <input type="text" name="MobilePhone_0" data-options="required:true,validType:'mobile'" class="easyui-validatebox inputstyle in3" />
     7                             <img src="/Theme/NewBlueVacation/Images/anniu_duding_false.png" class="add_img" />
     8                         </li>
     9 </ul>
    10 
    11 <div class="_buttom_check">
    12                         <table>
    13                             <tr>
    14                                 <td style=" 60%;"></td>
    15                                 <td class="_buttom A" style="color:#0f8ca3; auto"><a href="#">+增加一个账号</a></td>
    16                                 <td class="_buttom B"><a href="#" id="addbma"><img src="/Theme/NewBlueVacation/Images/3-5_anniu_queding.png" /></a></td>
    17                                 <td class="_buttom _C"><a href="#" id="cancel"><img src="/Theme/NewBlueVacation/Images/3-6_anniu_qudiao.png" /></a></td>
    18                                 @*<td class="_buttom _D"><a href="#"><img src="/Theme/NewBlueVacation/Images/3-7_anniu_daoru.png" /></a></td>*@
    19                             </tr>
    20                         </table>
    21  </div>
    页面代码

    javascript代码

    <script>
    //弹出对话框的方法
    window.onload = function () {
            if ("@ViewBag.Msg2" != "") {
                alert("@ViewBag.Msg2");
            }
    //checkbox检测所有的是否为选 中状态
     $('._ninput input[type=checkbox]').click(function () {
                    var cc = $('._ninput input[type=checkbox]');
                    var truelenght = 0;
                    cc.each(function (index) {
                        if (cc.eq(index).prop('checked'))
                        {
                            truelenght++;
                        }
                    })
    
                    if (truelenght == cc.length) {
                        $('.table1 .A').find('input[type=checkbox]').prop('checked', true);
                    }
                    else {
                        $('.table1 .A').find('input[type=checkbox]').prop('checked', false);
                    }
                });
    
    
    //添加一行
    $('.table2 .A').click(function () {
                    $('.table2 ._buttom_check').before($('.table2 .contentul').first().clone(true, true));
                    $('.table2 .contentul').slice(-1).find('input[type=text]').val("");
                    var ma = $('.table2 .contentul').size();
                    $.parser.parse($('.table2 .contentul')); //此行很重要,主要是添加jeasyui的功能
                    $('#hang').val(ma);
                    for (var i = 0; i < ma; i++) {
                        $.each($('.table2 .contentul'), function (index, value) {
                            if (index == i) {
                                $('.table2 .contentul').eq(index).find('li input[type=text]:eq(0)').attr('name', 'Email_' + i);
                                $('.table2 .contentul').eq(index).find('li input[type=text]:eq(1)').attr('name', 'FullName_' + i);
                                $('.table2 .contentul').eq(index).find('li input[type=text]:eq(2)').attr('name', 'QQ_' + i);
                                $('.table2 .contentul').eq(index).find('li input[type=text]:eq(3)').attr('name', 'MobilePhone_' + i);
                            }
                        });
                    }
    
                });
    
                //删除一行
                $('ul img').click(function () {
                    if ($('.table2 .contentul').size() > 1) {
                        $(this).parents("ul").remove();
                        var ma = $('.table2 .contentul').size();
                        $('#hang').val(ma);
                        for (var i = 0; i < ma; i++) {
                            $.each($('.table2 .contentul'), function (index, value) {
                                if (index == i) {
                                    $('.table2 .contentul').eq(index).find('li input[type=text]:eq(0)').attr('name', 'Email_' + i);
                                    $('.table2 .contentul').eq(index).find('li input[type=text]:eq(1)').attr('name', 'FullName_' + i);
                                    $('.table2 .contentul').eq(index).find('li input[type=text]:eq(2)').attr('name', 'QQ_' + i);
                                    $('.table2 .contentul').eq(index).find('li input[type=text]:eq(3)').attr('name', 'MobilePhone_' + i);
                                }
                            });
                        }
                    }
                });
    </script>
    javaScript代码
  • 相关阅读:
    dubbo入门(一)
    java中文件操作《一》
    Unity 游戏框架搭建 2019 (七) 自定义快捷键
    凉鞋:我所理解的框架 【Unity 游戏框架搭建】
    Unity 游戏框架搭建 2019 (六) MenuItem 复用
    Unity 游戏框架搭建 2019 (五) 打开所在文件夹
    Unity 游戏框架搭建 2019 (四) 导出 UnityPackage
    Unity 游戏框架搭建 2019 (三) 生成文件名到剪切板
    Unity 游戏框架搭建 2019 (二) 文本复制到剪切板
    Unity 游戏框架搭建 2019 (一) 简介与第一个示例文件名的生成
  • 原文地址:https://www.cnblogs.com/bolanbujing/p/4289803.html
Copyright © 2011-2022 走看看