|
50鱼币
本帖最后由 不二如是 于 2017-8-30 10:48 编辑
这是一段“重复性”很高的代码
哪位鱼油可以通过封装函数对下面的代码优化呢?
友情提示:
1、4个不同的id,jsonTip1、jsonTip2、jsonTip3、jsonTip4
2、调用方法均一样,除了参数col索引不一样,方法均相同
3、4个方法,appendD1()、appendD2()、appendD3()、appendD4()
- function appendD1() {
- $.getJSON("js/data.json", function (data) {
- var $jsontip = $("#jsonTip1");
- function sortByKey(array, key) {
- return array.sort(function (a, b) {
- var x = a[key];
- var y = b[key];
- return ((x > y) ? -1 : ((x < y) ? 1 : 0));
- });
- }
- var newdata = $.extend({}, data.data);
- newdata.rows = [];
- $.each(data.data.rows, function (i, r) {
- var item = {};
- $.each(r.cells, function (j, c) {
- item["col" + j] = c;
- })
- newdata.rows.push(item);
- })
- newdata = sortByKey(newdata.rows, 'col1');
- // 绘制
- var strHtml = "";//存储数据的变量
- $jsontip.empty();//清空内容
- $.each(newdata, function (infoIndex, info) {
- strHtml += `
- <tr>
- <td><b class="roleNum">${infoIndex + 1}</b></td>
- <td>${info["col0"]}</td>
- <td>${info["col1"]}</td>
- </tr>
- `;
- })
- $jsontip.html(strHtml);//显示处理后的数据
- // 前十个tr中,第一个td中的b,设置背景样式。
- $.each($('#div1 tr').slice(1, 11), function (i, item) {
- $(item).children('td').eq(0).children('b').css("background-color", "#3590de");
- });
- $.each($('#div1 tr').slice(1, 7), function (i, item) {
- $(item).children('td').eq(1).css("color", "#0002c0");
- });
- })
- }
- function appendD2() {
- $.getJSON("js/data.json", function (data) {
- var $jsontip = $("#jsonTip2");
- // 排序测试
- function sortByKey(array, key) {
- return array.sort(function (a, b) {
- var x = a[key];
- var y = b[key];
- return ((x > y) ? -1 : ((x < y) ? 1 : 0));
- });
- }
- var newdata = $.extend({}, data.data);
- newdata.rows = [];
- $.each(data.data.rows, function (i, r) {
- var item = {};
- $.each(r.cells, function (j, c) {
- item["col" + j] = c;
- })
- newdata.rows.push(item);
- })
- newdata = sortByKey(newdata.rows, 'col2');
- // 绘制
- var strHtml = "";//存储数据的变量
- $jsontip.empty();//清空内容
- $.each(newdata, function (infoIndex, info) {
- strHtml += `
- <tr>
- <td><b class="roleNum">${infoIndex + 1}</b></td>
- <td>${info["col0"]}</td>
- <td>${info["col2"]}</td>
- </tr>
- `;
- })
- $jsontip.html(strHtml);//显示处理后的数据
- $.each($('#div2 tr').slice(1, 5), function (i, item) {
- $(item).children('td').eq(0).children('b').css("background-color", "#3590de");
- });
- $.each($('#div2 tr').slice(1, 3), function (i, item) {
- $(item).children('td').eq(1).css("color", "#0002c0");
- });
- })
- }
- function appendD3() {
- $.getJSON("js/data.json", function (data) {
- var $jsontip = $("#jsonTip3");
- // 排序测试
- function sortByKey(array, key) {
- return array.sort(function (a, b) {
- var x = a[key];
- var y = b[key];
- return ((x > y) ? -1 : ((x < y) ? 1 : 0));
- });
- }
- var newdata = $.extend({}, data.data);
- newdata.rows = [];
- $.each(data.data.rows, function (i, r) {
- var item = {};
- $.each(r.cells, function (j, c) {
- item["col" + j] = c;
- })
- newdata.rows.push(item);
- })
- newdata = sortByKey(newdata.rows, 'col3');
- // 绘制
- var strHtml = "";//存储数据的变量
- $jsontip.empty();//清空内容
- $.each(newdata, function (infoIndex, info) {
- strHtml += `
- <tr>
- <td><b class="roleNum">${infoIndex + 1}</b></td>
- <td>${info["col0"]}</td>
- <td>${info["col3"]}</td>
- </tr>
- `;
- })
- $jsontip.html(strHtml);//显示处理后的数据
- $.each($('#div3 tr').slice(1, 8), function (i, item) {
- $(item).children('td').eq(0).children('b').css("background-color", "#3590de");
- });
- $.each($('#div3 tr').slice(1, 5), function (i, item) {
- $(item).children('td').eq(1).css("color", "#0002c0");
- });
- })
- }
- function appendD4() {
- $.getJSON("js/data.json", function (data) {
- var $jsontip = $("#jsonTip4");
- // 排序测试
- function sortByKey(array, key) {
- return array.sort(function (a, b) {
- var x = a[key];
- var y = b[key];
- return ((x > y) ? -1 : ((x < y) ? 1 : 0));
- });
- }
- var newdata = $.extend({}, data.data);
- newdata.rows = [];
- $.each(data.data.rows, function (i, r) {
- var item = {};
- $.each(r.cells, function (j, c) {
- item["col" + j] = c;
- })
- newdata.rows.push(item);
- })
- newdata = sortByKey(newdata.rows, 'col4');
- // 绘制
- var strHtml = "";//存储数据的变量
- $jsontip.empty();//清空内容
- $.each(newdata, function (infoIndex, info) {
- strHtml += `
- <tr>
- <td><b class="roleNum">${infoIndex + 1}</b></td>
- <td>${info["col0"]}</td>
- <td>${info["col4"]}</td>
- </tr>
- `;
- })
- $jsontip.html(strHtml);//显示处理后的数据
- $.each($('#div4 tr').slice(1, 9), function (i, item) {
- $(item).children('td').eq(0).children('b').css("background-color", "#3590de");
- });
- $.each($('#div4 tr').slice(1, 6), function (i, item) {
- $(item).children('td').eq(1).css("color", "#0002c0");
- });
- })
- }
复制代码
|
|