0

JQuery を使用して HTML テーブルを生成しましたが、記事内で多数のスパン要素を使用してテーブルに入力したいと考えています。

テーブルは 2 つの行にわたって両方の情報タイプを生成しますが、レコードの一部として同じ行に必要です。

過去数時間にわたって何百ものことを試しましたが、まだ問題を解決できません。2 番目のスパンが 2 番目の列に入るようにタグを開いたままにしておく必要がありますが、そのように 2 つのループを使用する必要があります。

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