Javascript jquery将表创建为字符串并控制列数

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

我的数据样本：

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

---

你想做什么还不是100%清楚，但从我的猜测来看，你似乎把事情弄得比需要的复杂得多

1） 永远不要在循环中与DOM交互。有一个大的性能击中。我不确定您的数据集有多大，但无论如何，这只是一个最佳实践。见：

因此，记住这一点&不要依赖jQuery进行附加等，只需构建一个字符串并用它填充您的popoverhtml：

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

var表=”；
表=''；
对于（变量i=0；i

更新：

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

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>';

var数据=[
{
span1:1，
span2:“foo”
},
{
span1:2，
span2:“酒吧”
},
{
span1:3，
span2:“等”
}
];
var numberOfColumns=2；
var表=“”；
var currentColumnNumber=1；
对于（变量i=0；inumberOfColumns）{
表+=''；
currentColumnNumber=1；
}    
}
//确保添加了最后一个“”
如果（currentColumnNumber>1）{
表+=''；
}
表+=''；

---

无括号的IF语句通常会导致这些类型的错误。放进一些括号，我打赌这会使它自己变直。（或者它会使您的编码错误变得明显）谢谢，这有助于消除表行错误，但是我仍然无法创建带有列的表这将是使用JavaScript模板库的最佳时机-您可以设置一个模板，然后将数据注入其中，而不是手动构建html。您能告诉我们这应该是什么样子吗？从我看到的情况来看，您正在将这两个值添加到同一个表单元格中，而numCols设置为2。此

i%numCols

返回一个整数（这是数学），但您正在检查它是否为布尔值。如果您想知道何时开始新行，是否应该在模数中使用

键

？谢谢！我喜欢您简化的方式，但我仍然需要能够设置列数（请参见上面的编辑到问题）。在一个大数据集的情况下，一个单列弹出窗口会太长再次感谢你，但我无法控制结构。我认为一个函数应该在循环中每x次迭代运行一次，其中x是指定的列数，它会向表中添加一个新行。谢谢！我只是通过使用if（计数器%colNum==0）{…}实例化一个计数器变量来实现同样的效果。你的代码帮了我很多，我感谢你的帮助！嗯。。。很高兴我能帮忙！

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>';