1

last.fm APIからの特定の場所（この例ではマドリード）のイベントを表示するテーブルがあります。AJAXでデータを取得することはできますが、問題は、ヘッダーがテーブルの下部に配置される方法で、テーブルの入力が厄介であるということです。

これが私のJQueryです：

$.fn.getEvents = function(location) {
    var onComplete = function() {
      //$('#eventtbl').jExpand();
      $('#evttbldiv').fadeIn(250);
    };

    var $this = $(this);

    var container = $this.html();

    this.each(function() {
       $.getJSON(
        settings.PHP_REQUEST_URL,
        {
          method    : "geo.getEvents",
          api_key   : settings.LASTFM_APIKEY,
          location  : location,
          distance  : settings.MAX_DISTANCE,
          format    : "json"
        },
        function(data) {
          $.each(data.events.event, function(i, item){
            event     = item.title;
            headliner = item.artists.headliner;
            venue     = item.venue.name;
            date      = item.startDate;

            if(i != 0) $('.headers', $this).remove();
            $this.append(container);

            var $current = $this.children(':eq('+i+')');

            $current.find('[class=lfm_event]').append(event);
            $current.find('[class=lfm_headliner]').append(headliner);
            $current.find('[class=lfm_venue]').append(venue);
            $current.find('[class=lfm_date]').append(date);

            if(i == (settings.MAX_TRACKS - 1)){
              onComplete.call(this);
          }
          });
        }
      );
  });
};

これが私のテーブルHTMLです：

<div id="evttbldiv">
      <table id="eventtbl">
          <tr class="headers">
            <th>Evento</th>
            <th>Artista principal</th>
            <th>Local</th>
            <th>Data</th>
            <th></th>
          </tr>
        <tr class="rowdata">
          <td class="lfm_event"></td>
          <td class="lfm_headliner"></td>
          <td class="lfm_venue"></td>
          <td class="lfm_date"></td>
          <td><div class="arrow"></div></td>
        </tr>
        <tr class="rowinfo">
            <td colspan="5">
              hello
            </td>
        </tr>
      </table>
    </div>

そして、これが私がメソッドを呼び出す方法です：

  $('#eventtbl').getEvents('madrid');

ここでページをライブで見ることができます。

私がやりたいのは、上部にヘッダーがあり、でデータを取得すると$this = $(this)、ヘッダーも取得することです。ヘッダーをそのまま維持し、ヘッダーの後にテーブルの各行を挿入する方法はありますか？現在のコードでは、テーブル全体を取得してから、最初の行でない場合はヘッダーを削除しています。これはかなり非効率的で、ご覧のとおり、テーブルを台無しにしてしまいます。

4

2 に答える 2

0

.after（）関数を使用できます。

$(header).after(the_html);

お役に立てば幸い

編集：

あなたが使用することができます：

$("#yourtable tr:last-child").append(the_html);
于 2012-10-21T17:28:31.020 に答える
0

と を使用してテーブルをセットアップすることをお勧めしますthead。tbody

<div id="evttbldiv">
    <table id="eventtbl">
        <thead>
            <tr>
                <th>Evento</th>
                <th>Artista principal</th>
                <th>Local</th>
                <th>Data</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr class="rowdata">
                <td class="lfm_event"></td>
                <td class="lfm_headliner"></td>
                <td class="lfm_venue"></td>
                <td class="lfm_date"></td>
                <td><div class="arrow"></div></td>
            </tr>
            <tr class="rowinfo">
                <td colspan="5">
                    hello
                </td>
            </tr>
        </tbody>
    </table>
</div>

次に、行データからヘッダー データを分割する必要があります。

$('table')
    .find('thead').html(header).end()
    .find('tbody').html(container);
于 2012-10-21T19:28:40.427 に答える