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