0

以下のコードでは、データベースからの値を持つ 1 つのテーブルを持っています。クエリを実行した後、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

あなたがこれを自分で解決するためにどれだけの努力をしたかはわかりませんが、公平を期すために、思考プロセスを少し説明します. 考慮する必要があるのは、「行」を「一般的なエンティティ」から概念化し、分離することです。たとえば、「データを含む行を含むテーブルがあります」。

ループ自体は行の作成時に実行され、それ自体の作成とは別のアクションとして実行する必要があり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 に答える
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 に答える