javascript中的数据渲染与提取 javascript中的数据渲染与提取

table数据

行业 9月10日 9月11日 9月12日 9月13日 9月14日 9月15日 9月16日 9月17日 9月18日 9月19日 9月20日 9月21日 9月22日 9月23日 9月24日

服装 2.15 1.0 1.0 1.0 1.0 1.0 1.0 1.0

服装 2.15 1.0 1.0 1.0 1.0 1.0 1.0 1.0

行业	9月10日	9月11日	9月12日	9月13日	9月14日	9月15日	9月16日	9月17日	9月18日	9月19日	9月20日	9月21日	9月22日	9月23日	9月24日
服装	2.15	1.0	1.0	1.0	1.0	1.0	1.0	1.0
服装	2.15	1.0	1.0	1.0	1.0	1.0	1.0	1.0

方式一：
直接遍历table提取数据：

function getTableData(){ var tableData = https://www.it610.com/article/[]; //要求给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 = https://www.it610.com/article/data; var $table = $('
'); var $tbody = $(''); $table.append($tbody); for (var trdata in tableData ) { var $tr = $(''); $tbody.append($tr); // tr for (var j = 0; j < trdata.length; i++) { // td var $td = $(''); $tr.append($td); if(trdata[j]){//trdata[j]有值把值填入td $td.html(trdata[j]); }else{//trdata[j]没有值，生成input输入框填入td var $input = $(''); $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返回的数据格式一致

【javascript中的数据渲染与提取】转载于:https://www.cnblogs.com/james0/p/7542077.html