使用JS手动添加 table的行数,将添加相同属性的值以拼接字符串的形式传输到后台。

效果图:

实现功能:添加行,二级联动,对添加行进行操作。

相关代码:

<table border="1" width="60%" align="center" class="role_select">
                        <thead>

<tr><td><a class="button blueButton" οnclick="addRow()" >添加抄送人</a></div></td> </tr>
                            <tr>
                                <th style="text-align: center;">部门</th>
                                <th style="text-align: center;">角色</th>
                                <th style="text-align: center;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="tBody">
                        </tbody>
                    </table>

 

 

JS:

//添加抄送人
    var rols,son_accounts;
    $(function(){
        $.ajax({
            url:'${ctx}/api/reimbursement/expense!chooseCopierDepartment.do',
            dataType:'json',
            success:function(result){
                rols="<option value=''>---请选择---</option>";
                /* rols+="<option value='153'>总部</option>"; */
                if(result.result==1)
                    $.each(result.data,function(index,item){
                        rols+="<option value='"+item.department_id+"'>"+item.department_name+"</option>";
                    })
            },
            error:function(){
                alert("出错了");
            }
        });
    });
    
    function roleChange(obj){
        //debugger;
        //var id=$("#department").val();
        var flag=false;
        /* if(!id){
            alert("请选择部门");
            return;
        } */
        if($(obj).val()==''){
            $(obj).parent().next().children().html('');
            return;
        }
        var id=$(obj).val();
        son_accounts="";
        $.ajax({
            url:'${ctx}/api/reimbursement/expense!chooseCopier.do?dep_id='+id,//二级联动的url
            dataType:'json',
            success:function(result){
                if(result.result==0){
                    alert(result.message);
                    $("#memberids").val("");
                }
                if(result.result==1){
                    $.each(result.data,function(index,item){
                        son_accounts+="<option value='"+item.id+"'>"+item.name+"</option>";
                    })
                $(obj).parent().next().children().html(son_accounts);
                }},
            error:function(){
                alert("出错了");
            }
        });
    }
    
    function addRow(){
        if(rols){
            var strTr="<tr><td><select id='memberids' name='memberids' οnchange='roleChange(this)'>"+rols+"</sclect></td><td><select name='son_member_id'></sclect></td><td><a οnclick='del(this)' href='javascript:void(0)'>删除</a></td>";
            $("#tBody").append(strTr);
        }else{
            alert("请求超时");
        }
    }
    
    function save(){
        if(!$("#addForm").form().form('validate')){
            return ;
        }
        debugger;
        $("#departmentName").val($("#department").find("option:selected").text());
        var copiers="";
        var copierIds="";
        var ids=$("#tBody select[name='son_member_id']");
        $.each(ids,function(index,item){
            if(index==ids.size()-1)
                copiers+=$(item).find('option:selected').text();
            else
                copiers+=$(item).find('option:selected').text()+",";
        });
        $.each(ids,function(index,item){
            if(index==ids.size()-1)
                copierIds+=$(item).find('option:selected').val();
            else
                copierIds+=$(item).find('option:selected').val()+",";
        });
        console.log(copiers);
        $("#copiers").val(copiers);
        $("#copierIds").val(copierIds);
       
        
        var formflag = $("#addExpenseApply").form().form('validate');
        if (formflag) {
            $.Loading.show("<@uiLabel text='warehouseAdd.Adding'/>......");/*正在添加*/
            var options = {
                url : "**************************?ajax=yes",//提交到后台url
                type : "POST",
                dataType : 'json',
                success : function(result) {
                    if (result.result == 1) {
                        $.Loading.success(result.message);
                        window.location.href = "${ctx}/reimbursement/expense_apply_list.html";
                    }
                    if (result.result == 0) {
                        $.Loading.error(result.message);
                    }
                },
                error : function(e) {
                    alert("<@uiLabel text='warehouseAdd.chuxiancuowu'/>");/*出现错误 ,请重试*/
                }
            };
            $("#addExpenseApply").ajaxSubmit(options);
        }
        
    }
   
    //删除行
    function del(obj){
        var tr=obj.parentNode.parentNode;
        var tBody=tr.parentNode;
        tBody.removeChild(tr);
    } 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值