Question

我正在尝试在我的网站上的弹出窗口中显示来自Web API的结果。结果需要格式化为弹出窗口内的表格，其中可以设置列数（在下面的示例中设置为2列）。我使用$ .each语句迭代数据并构建html表，但得到错误（请参阅下面的注释）。此外，我的弹出窗口期望内容的字符串值（请参阅下面的变量“内容”），因此不确定如何最好地创建具有表值的字符串。请看下面我被困的地方 - 感谢您的帮助，如果有问题请告诉我。感谢。

我的数据样本：

[
    {
        "var1": 1,
        "var2": "foo"
    },
    {
        "var1": 2,
        "var2": "bar"
    },
    {
        "var1": 3,
        "var2": "etc"
    }
]

获取样本数据并在弹出窗口中显示的功能：

 function GetData() {

        var html = true;
        var numCols = 2; //assign the number of columns to build

        $.ajax({
            url: 'http://my/api/call',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                debugger;
                var content = "";

                var i = data.length;
                $.each(data, function (key, val) {
                if (!(i % numCols)) tRow = $('<tr>');
                    tCell = $('<td>').html("<span class=\"content-big\">" + val.var1+ "</span><span class=\"content-small\"> " + val.var2+ "</span> ");
                    content = $('table').append(tRow.append(tCell)); //ERROR: tRow is not defined

                $('.popup').popover({
                    content: content,
                    html: html
                });

            },
            error: function (x) {
                alert(x);
            }
        });
    }

更新：

对于2列布局，应该看起来像

--------------
1 foo | 3 etc
2 bar | 
--------------

Answer 1

这并不是100％清楚你要做的是什么，但从我能猜到的情况来看，你看起来比你需要的要复杂得多。

1）你永远不应该在循环中与DOM交互。这是一个巨大的性能影响。我不确定你的数据集有多大，但无论如何，这只是一种最佳实践。请参阅：http://jsperf.com/jquery-append-multiple-times-vs-array-vs-html-once/2

所以，考虑到这一点＆amp;而不是依赖jQuery来追加等，只需构建一个字符串并用你的popover html填充：

var table = '';

table = '<table><tbody>';

for (var i = 0; i < data.length; i++) {
    var row = data[i];
    table += ('<tr><td class="content-big">' + row.col1 + '</td><td class="content-small">' + row.col2 + "</td></tr>");
}

table += '</tbody></table>';

$('.popup').popover({
    content: table,
    html: true
});

http://jsfiddle.net/CZ5zW/

更新：

好的，如果您无法修改数据结构，这是您的解决方案：

var data = [
    {
        span1: 1,
        span2: "foo"
    },
    {
        span1: 2,
        span2: "bar"
    },
    {
        span1: 3,
        span2: "etc"
    }
];

var numberOfColumns = 2;

var table = '<table><tbody>';

var currentColumnNumber = 1;

for (var i = 0; i < data.length; i++) {
    var td = data[i];    
    if(currentColumnNumber === 1) {
        table += '<tr>';
    }
    table += ('<td><span class="content-big">' + td.span1 + '</span><span class="content-small">' + td.span2 + "</span></td>");

    currentColumnNumber ++;    
    if(currentColumnNumber > numberOfColumns) {
        table += '</tr>'; 
        currentColumnNumber = 1;        
    }    
}

//make sure the final "</tr>" is added
if (currentColumnNumber > 1) {
    table += '</tr>';   
}

table += '</tbody></table>';

http://jsfiddle.net/56FFx/1/

jquery创建表作为字符串和控制列数

1 个答案: