Question

我使用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>

Answer 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>');
          });
    });
});

Answer 2

转而遍历所有文章，然后在每篇文章标签内找到标题和描述范围：

$('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>');
});

使用Jquery生成和填充多列表

2 个答案: