优化重复代码 | 【有奖问答】

不二如是

这是一段“重复性”很高的代码

哪位鱼油可以通过封装函数对下面的代码优化呢？

友情提示：

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");
        });
    })
}

wongyusing

能给一份json文件，让我看看。主要是测试一下到底要生成什么内容。  
我在python经常写通用性很高的代码。js也想试试

凌乱大帅比

好~~~~~~长.................

waitforlove

appendmy(1,11,7);
appendmy(2,5,3);
appendmy(3,8,5);
appendmy(4,9,6);
function appendmy(n,m,k) {
    $.getJSON("js/data.json", function (data) {
        var $jsontip = $("#jsonTip"+n);

        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, 'col'+n);
        // 绘制
        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["col"+'+n+']}</td></tr>\
            ';
        })
        $jsontip.html(strHtml);//显示处理后的数据
        // 前十个tr中，第一个td中的b，设置背景样式。
        $.each($('#div'+n+'tr').slice(1, m), function (i, item) {
            $(item).children('td').eq(0).children('b').css("background-color", "#3590de");
        });
        $.each($('#div'+n+'tr').slice(1, k), function (i, item) {
            $(item).children('td').eq(1).css("color", "#0002c0");
        });
    })
}

一个账号

太————————————————————长————————————————————了————————————————————

weiter

有点长啊

bangbang-ande

好长。。。