javascript - 文字列としてテーブルを作成し、列の数を制御するjquery

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