0

我已经使用 JQuery 生成了一个 HTML 表格，并希望在文章中使用一些 span 元素来填充表格。

该表在两行上生成两种信息类型，但我需要它在同一行上作为记录的一部分。

在过去的几个小时里，我尝试了一百件事，但仍然无法解决问题。我必须保持标签打开以允许第二个跨度进入第二列，但我必须以这种方式使用两个循环，另一种方式我有点接近实现我的目标如下：

jQuery

 $(document).ready(function()
  {
    $('#blockbuster_top_100_films').hide();

    $('#try_this').click(function()
    {                   
          $('#content').append('<table border="1"/>');

          $('table').prepend('<th> Movies </th>', '<th> Description </th>');

          $('span[class="title"], span[class="description"]').each(function()
          {
            $('table').append('<tr><td>' + $(this).text() + '</td><td>' + $(this).text() + '</td></tr>');
          }); 

    });
  });

HTML

     <body>
        <input type='button' value='Try this' id='try_this' />


      <section id="blockbuster_top_100_films">
        <article>
          <span class="title">Cowboys &amp; Aliens</span>
          <span class="link">http://www.blockbuster.com:80/catalog/movieDetails/363773</span>
          <span class="description">Based on the graphic novel by Scott Mitchell Rosenberg, Cowboys &amp; Aliens is set in 1800s Arizona, where the local cowboys, headed by gunslinger Jake Lonergan (Daniel Craig), and the indigenous Apache...</span>
          <img src="http://images.blockbuster.com/is/amg/dvd/cov150/drv200/v286/v28605bhsao.jpg?wid=65&amp;&amp;hei=91&amp;cvt=jpeg" />
        </article>
        <article>
          <span class="title">The Change-Up</span>
          <span class="link">http://www.blockbuster.com:80/catalog/movieDetails/483305</span>
          <span class="description">A married father and a swinging single swap bodies after a wild night of drinking, and do their best not to throw each other's lives into complete chaos while scrambling to figure out a way to get...</span>
          <img src="http://images.blockbuster.com/is/amg/dvd/cov150/drv200/v273/v27351ldlup.jpg?wid=65&amp;&amp;hei=91&amp;cvt=jpeg" />
        </article>
        <article>
          <span class="title">Super 8</span>
          <span class="link">http://www.blockbuster.com:80/catalog/movieDetails/486208</span>
          <span class="description">Writer/director J.J. Abrams teams with producer Steven Spielberg for this period sci-fi thriller set in the late '70s, and centering on a mysterious train crash in a small Ohio town. Summer, 1979: a...</span>
          <img src="http://images.blockbuster.com/is/amg/dvd/cov150/drv200/v281/v28148xntyb.jpg?wid=65&amp;&amp;hei=91&amp;cvt=jpeg" />
        </article>
        <article>
          <span class="title">The Hangover Part II</span>
          <span class="link">http://www.blockbuster.com:80/catalog/movieDetails/453672</span>
          <span class="description">A modest bachelor brunch devolves into a wild weekend in Bangkok when the gang travels to Thailand to see Stu get married. Still traumatized by memories of the Las Vegas fiasco, Stu (Ed Helms) vows...</span>
          <img src="http://images.blockbuster.com/is/amg/dvd/cov150/drv200/v275/v27553l0jmg.jpg?wid=65&amp;&amp;hei=91&amp;cvt=jpeg" />
        </article>
</section>

</body>
4

2 回答 2

1

您希望遍历文章（针对表中的每一行）而不是跨度。我已经修复了你的循环，<td>如果你想要所有这些，你也可以遍历每个（列）的跨度，但是在你的原始代码中你只有标题和描述，所以我坚持了这一点。

$(document).ready(function()
{
    $('#blockbuster_top_100_films').hide();

    $('#try_this').click(function()
    {                   
          $('#content').append('<table border="1"/>');

          $('table').prepend('<th> Movies </th>', '<th> Description </th>');

          $('#blockbuster_top_100_films article').each(function(index,el)
          {
             $('table').append('<tr><td>' + $(el).find('.title').text() + '</td><td>' + $(el).find('.description').text() + '</td></tr>');
          });
    });
});
于 2013-11-05T22:53:52.033 回答
1

而是循环所有文章，然后在每个文章标签内找到标题和描述范围：

$('article').each(function(){
    var $this = $(this);
    var title = $this.find("span.title").text();
    var desc = $this.find("span.description").text();
    $('table').append('<tr><td>' + title + '</td><td>' + desc + '</td></tr>');
});
于 2013-11-05T23:00:59.920 回答