javascript - 生成表格宽度动态json数据

Question

我创建了一个插件生成网格，数据是 json 字符串。

            var objGrid = { 
                "tbody": [
                    { "stt": "1", "name": "Le Nguyen Nhat Bang", "description": "Vinh Long" },
                    { "stt": "2", "name": "Dang Truong Chinh", "description": "Binh Dinh" },
                    { "stt": "3", "name": "Cu Ngoc Sang", "description": "Dak Lak" }
                ]
            }

    (function ($) {
                $.fn.generateGrid = function (data) {
                    this.append("<table>");

                    var tbody = $('<tbody>');
                    $("table", this).append(tbody);
                    if (data != null && data.tbody != null) {
                        for (var j = 0; j < data.tbody.length; j++) {
                            $(tbody).append('<tr>').children('tr:last')
                            .append($("<td>").append(data.tbody[j]....))
                            .append($("<td>").append(data.tbody[j]....))
                            .append($("<td>").append(data.tbody[j]....));
                        }
                    }
                }

            } (jQuery));

 $(document).ready(function () {
            $("#grid").generateGrid(objGrid);
        });

我想生成动态表跟随 json 数据。现在它只有三个字段，另一天我想要 4 或 5 个字段但不更改插件中的代码。谢谢

Answer 1

尝试这个。使用 each 方法循环 json 的每个属性以附加 td。所以会有多少属性会增加那么多的td。

(function ($) {
            $.fn.generateGrid = function (gridTitle, data) {
                this.append("<table>");

                var tbody = $('<tbody>');
                $("table", this).append(tbody);
                if (data != null && data.tbody != null) {
                    for (var j = 0; j < data.tbody.length; j++) {
                    var trContent=   data.tbody[j],
                        trElm=$('<tr />') 



                    $.each(trContent,function(k,v){
                        trElm.append('<td>'+v+'</td>');
                    });

                    $(tbody).append(trElm);   
                    }
                }
            }

        } (jQuery));