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=" width:60%;"></td>
15                                 <td class="_buttom A" style="color:#0f8ca3; width: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代码

 

posted on 2015-02-13 10:32  波澜不惊super  阅读(279)  评论(0)  编辑  收藏  举报

导航