页面动态添加表格以及后台解析

最新推荐文章于 2021-10-22 16:56:54 发布

Jevonn

最新推荐文章于 2021-10-22 16:56:54 发布

阅读量521

点赞数

分类专栏： js相关

本文链接：https://blog.csdn.net/cj_0513/article/details/81560582

版权

js相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、页面部分

<tr valign="bottom">
                        <td colspan="4">
                            <table width="80%" align="center" id="addNewTable">
                                <thead>
                                    <tr align="center">
                                        <td width="25%">参与人</td>
                                        <td width="25%">公司名称</td>
                                        <td width="25%">联系方式</td>
                                        <td width="25%">公司地址</td>
                                    </tr>
                                </thead>
                                <tbody id="addNewTbody">

                                </tbody>
                                <tfoot align="center">
                                    <tr>
                                        <td colspan="4"><input type="button" value="添加"
                                            onclick="addTr();">
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </td>
    </tr>

2、js部分处理动态表格数据
我这里是在from里面添加了一个整合字段，然后后台解析数据。

//添加动态表格。
function addTr() {
        var insertSpareEpt = document.getElementById("addNewTbody");
        //创建一个tr
        var newChild = document.createElement("tr");
        //可以添加样式
        newChild.innerHTML = "<td><input type='text' id='partiCipant'  style='width: 100%;height: 40px' name='partiCipant'/></td><td><input type='text' style='width: 100%;height: 40px' id='invCompany' name='invCompany'/></td><td><input type='text' style='width: 100%;height: 40px' id='biPhone' name='biPhone' /></td><td><input type='text' id='companyAddress'  style='width: 100%;height: 40px' name='companyAddress'/></td><td><input type='button' value='删除' onclick='deleteTrShow(this)'/><span id='typepro'></span></td>";
        insertSpareEpt.appendChild(newChild);
}
//删除动态添加的表格
function deleteTrShow(obj) {
        var insertSpareEpt = document.getElementById("addNewTbody");
        var row = obj.parentNode.parentNode; //所在行
        var rowIndex = row.rowIndex; //A标签所在行下标
        insertSpareEpt.deleteRow(rowIndex - 1); //删除当前行
        tableData();
}
// 整合动态表格数据。
function tableData() {
        var list = [];
        //获取到标签tr
        var trList = $("#addNewTbody").children("tr")
        //循环遍历
        for ( var i = 0; i < trList.length; i++) {
            var arr = {};
            //循环获取每个td
            var tdArr = trList.eq(i).find("td");
            //赋值
            var partiCipant = tdArr.eq(0).find("input").val()
            var invCompany = tdArr.eq(1).find("input").val()
            var biPhone = tdArr.eq(2).find("input").val()
            var companyAddress = tdArr.eq(3).find("input").val()
            //给数组的每个元素赋值
            arr["partiCipant"] = partiCipant;
            arr["invCompany"] = invCompany;
            arr["biPhone"] = biPhone;
            arr["companyAddress"] = companyAddress;
            list.push(arr);
        }
        //转化成json通过from表单提交。
        document.getElementById("bqContent").value = JSON.stringify(list);
}
//之后调用保存的方法。
function add(saveType) {
        adds();
        tableData();
        document.forms[0].action ="<%=basePath%>/pds/bidding/BBidOpeningAction.do?method=add&saveType="+ saveType;
        document.forms[0].submit();
}

3、后台解析数据保存数据


//传递的数据格式[{"partiCipant":"1","invCompany":"1","biPhone":"1","companyAddress":"1"}{"partiCipant":"2","invCompany":"2","biPhone":"2","companyAddress":"2"},{"partiCipant":"3","invCompany":"3","biPhone":"3","companyAddress":"3"}]
//转换成json数组
JSONArray ja = JSONArray.fromObject(Form.getBqContent());
        for(int i=0;i<ja.size();i++){
        BBidInfoDto  dtos = new BBidInfoDto();  
        //将每个json数组转化成为一个json字符串。
            JSONObject jso = JSONObject.fromObject(ja.get(i));
    //获取单个对象的属性值。       dtos.setPartiCipant(jso.getString("partiCipant").toString());
            dtos.setInvCompany(jso.getString("invCompany").toString());
            dtos.setBiPhone(jso.getString("biPhone").toString());
            dtos.setCompanyAddress(jso.getString("companyAddress").toString());
            dtos.setScore(Form.getScore());

    bBidInfoService.saveBBidInfo(dtos);
        }