0

在下面的代码中，我有一个表，其中包含来自数据库的值。执行查询后，如果我有 5 个值，我只获得表中的第一个值（在弹出窗口中）。在这个 html() 函数中，我如何添加 foreach以及每个参数的类型，我使用了 ajax、json、jquery

我的代码是；

success: function (msg) {
    var data = $.parseJSON(JSON.stringify(eval("(" + msg.d + ")")));

    $('<div></div>')
        .appendTo('body')
        .html('<div><b>SHAREHOLDER DETAILS</b></br>' + data.Id + '</div>' + 
              '<div>' + data.name + '</div>' + 
              '<div>' + data.Id + '</div>' + 
              '<table border="1" style="background-color:silver;"><tr>' + 
              '<td>' + 'OwnedBy' + '</td>' + 
              '<td>' + 'ShareClass' + '</td>' + 
              '<td>' + 'EffectiveInterest' + '</td>' + 
              '<td>' + 'DeemedInterest' +'</td>' + 
              '<td>' + 'SharesOwned' + '</td>' + 
              '<td>' + 'SharesIssued' + '</td>' + 
              '</tr>' + 
              '<tr>' + 
              '<td>' + data.Id +'</td>' + 
              '<td>' + data.share + '</td>' + 
              '<td>' + data.effect + '</td>' + 
              '<td>' + data.deemed + '</td>' + 
              '<td>' + data.owned + '</td>' + 
              '<td>' + data.issued + '</td>' + 
              '</tr>' + 
              '</table>')
        .dialog({
            modal: true, 
            title: '<div>' + data.Id + '</div>', 
            zIndex: 10000, 
            autoOpen: true, 
            position: ['right', 'top'],
            width: 'auto', 
            height: 'auto', 
            modal: false, 
            resizable: false, 
            closeOnEscape: false,
            show: "slide", 
            hide: "explode",
            close: function (event, ui) {
                $(this).remove();
            }
        });
},
4

2 回答 2

0

您需要某种迭代器函数，因为您拥有它，代码只会提取第一个值。

我的建议是使用 .each：

var element = $('<table></table>').appendTo('body');
jQuery.each(data, function(i, val) {
    element.append(
        '<tr>' +
        '<td>' + val.Id +'</td>' + 
        '<td>' + val.share + '</td>' + 
        '<td>' + val.effect + '</td>' + 
        '<td>' + val.deemed + '</td>' + 
        '<td>' + val.owned + '</td>' + 
        '<td>' + val.issued + '</td>';
        '</tr>';
    );
 });

没有测试它只是因为我没有数据字符串，但希望这能让你接近。

于 2012-05-26T14:57:18.597 回答
0

我不知道您为自己解决这个问题付出了多少努力，但为了公平起见，我将稍微解释一下思考过程。您需要考虑的是概念化并将“行”与“一般实体”分开，例如，“我有一个包含数据行的表”。

循环本身在创建行时运行，并且必须作为创建table自身的单独操作执行。即使您将循环逻辑嵌入到table构造本身中（就标记生成本身而言，我认为这是不好的做法），您仍然必须将每一行视为循环运行的结果，与table,thead和tbody. 请注意，即使使用行 ( tr)，行 ( ) 中的每个单元格中都有另一个（潜在的）循环要求td。在这种情况下，您不需要该级别的循环，但这指向概念化循环设计和利用的基本原理。

这是一个使用 jQuery 元素缓存和jQuery.each()循环的方法，它是一种foreach循环。注意，在 Javascript 中没有专门的foreach循环；但是，有for(var i in object)，它允许您迭代此类对象。

$(document).ready(function(){
    var $table = $('<table>'),
        $tbody = $('<tbody>'),
        $thead = $('<thead>' +
                   '<tr>' +
                   '<th>OwnedBy</th>' +
                   '<th>ShareClass</th>' +
                   '<th>EffectiveInterest</th>' +
                   '<th>DeemedInterest</th>' +
                   '<th>SharesOwned</th>' +
                   '<th>SharesIssued</th>' +
                   '</tr>' +
                   '</thead>'),
        $tr = $('<tr>'),
        data = {
            grp1: {
                Id: 'id1',
                share: 'share',
                deemed: 'deemed',
                effect: 'effect',
                owned: 'owned',
                issued: 'issued'
            },
            grp2: {
                Id: 'id2',
                share: 'share',
                deemed: 'deemed',
                effect: 'effect',
                owned: 'owned',
                issued: 'issued'
            },
            grp3: {
                Id: 'id3',
                share: 'share',
                deemed: 'deemed',
                effect: 'effect',
                owned: 'owned',
                issued: 'issued'
            }
        };

    $table
        .append($thead, $tbody)
        .appendTo(document.body);

    jQuery.each(data, function(i, val) {
        $tr.clone()
            .appendTo($tbody)
            .append(
                '<td>' + val.Id +'</td>' +
                '<td>' + val.share + '</td>' +
                '<td>' + val.effect + '</td>' +
                '<td>' + val.deemed + '</td>' +
                '<td>' + val.owned + '</td>' +
                '<td>' + val.issued + '</td>'
            );
    });
});

http://jsfiddle.net/YFwTe/

于 2012-05-26T15:37:29.117 回答