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返回的数据格式一致
