javascript中的数据渲染与提取

table数据

<div id="tableDiv" style="overflow-x: scroll">
        <table class="table table-hover static-table my-table">
            <thead>
            <tr>
                <th>行业</th>
                
                <th>9月10日</th>
                
                <th>9月11日</th>
                
                <th>9月12日</th>
                
                <th>9月13日</th>
                
                <th>9月14日</th>
                
                <th>9月15日</th>
                
                <th>9月16日</th>
                
                <th>9月17日</th>
                
                <th>9月18日</th>
                
                <th>9月19日</th>
                
                <th>9月20日</th>
                
                <th>9月21日</th>
                
                <th>9月22日</th>
                
                <th>9月23日</th>
                
                <th>9月24日</th>
                
            </tr>
            </thead>
            <tbody>
             <tr>
                <td>服装</td>
                
                <td>2.15</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td><input serviceitemid="5000000000012" day="Mon Sep 18 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Tue Sep 19 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Wed Sep 20 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Thu Sep 21 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Fri Sep 22 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Sat Sep 23 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Sun Sep 24 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
            </tr>
            <tr>
                <td>服装</td>
                
                <td>2.15</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td>1.0</td>
                
                <td><input serviceitemid="5000000000012" day="Mon Sep 18 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Tue Sep 19 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Wed Sep 20 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Thu Sep 21 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Fri Sep 22 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Sat Sep 23 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
                <td><input serviceitemid="5000000000012" day="Sun Sep 24 00:00:00 CST 2017" type="text" size="2" value="1.0"></td>
                
            </tr>
            
            </tbody>
        </table>
    </div>

方式一：

直接遍历table提取数据：

 function getTableData(){
        var tableData = [];
        //要求给table的class属性添加'my-table'
        var tableTrArr = $('.my-table').find('tbody').find('tr');
        for ( var i = 0; i < tableTrArr.size(); i++ ) { // tr
            tableData[i] = [];
            var tableTdArr = $('.my-table').find('tbody').find('tr').eq(i).find('td');
            for ( var j = 0; j < tableTdArr.size(); j++ ) { //td
                if (tableTdArr.eq(j).find('input').size()) {
                    tableData[i].push(tableTdArr.eq(j).find('input').val());
                } else {
                    tableData[i].push(tableTdArr.eq(j).html());
                }
            }
        }

        //tableData为二维数组，包含table中的所有数据

    }

方式二：

页面上有个table，table里面的数据要通过RPC获取到的json格式的数据来渲染，table中有的td没有数据，没有数据的td中放input输入框，并带入默认数据

意味着td中的数据有可能有改动

提交保存时，提交到后台的数据已RPC相同的格式提交

var tableData;//全局变量

查询数据：

 var function queryData() {
                $.ajax({
                    url: "/data/getRatio.json",
                    dataType: "json",
                    type: "POST",
                    data: {
                        "opCode":xxxxxxx,
                        "dateRange":2017-09-10/2017-09-25
                    },
                    success: function (result) {
                        if (result.hasError == true) {
                            alert("操作失败");
                            return;
                        }
                        if (!result.content || result.content.isSuccess == false) {
                           alert("操作失败");
                        } else {
                            showData(result.content.data);
                            
                        }
                    }
                });
            };

显示方法：

 function showData(data){
        tableData = data;
                            var $table = $('<table></table>');
                            var $tbody = $('<tbody></tbody>');
                            $table.append($tbody);
                            for (var trdata in tableData ) {
                                var $tr = $('<tr></tr>');
                                $tbody.append($tr);
                                // tr
                                for (var j = 0; j < trdata.length; i++) {
                                    // td
                                    var $td = $('<td></td>');
                                    $tr.append($td);
                                    if(trdata[j]){//trdata[j]有值把值填入td
                                        $td.html(trdata[j]);
                                    }else{//trdata[j]没有值，生成input输入框填入td
                                        var $input = $('<input type="text">');
                                        $td.append($input);
                                        $input.val(trdata[j]);
                                        //给输入框添加事件监听，input的改动会作用到tableData对象
                                        $td.find('input').on('change', function() {
                                            trdata[j] = $(this).val();
                                        })
                                    }
                                }
                            }
                            $('#tablediv').append($table);
    }

页面提交后，要把table中改动过的数据提交到后台保存

按照以上的方式渲染数据并填加input的事件监听，input里面改动的数据会通过引用自动生效到tabelData，提交保存的时候，直接拿tableData提交到后台就可以了

tableData的格式会和RPC ：/data/getRatio.json返回的数据格式一致