Question

表格结果的问题已经排序。但是按钮上方显示的结果存在问题。我已经玩过CSS的定位，看看是否有所作为，但无济于事。

按钮上方

 $(document).ready(function(){
        $('#Wresults').click(function(){  
            $('#content').append('<ul />');
            $('span[class="womens_name"]').each(function(){
               $('#content ul:last-child').append('<li>' + $(this).text()  + '</li>' );
            }); 
        });
    });

HTML

        <input type='button' value='Womens Results' id='Wresults'/>
        <div id="textHolder">
        <section id="womens_results">
        <article>
            <span class="womens_name">Rachael Armstrong - 22:19</span>
        </article>
        <article>
            <span class="womens_name">Christine Boyd: 31:30</span>
        </article>
        <article>
            <span class="womens_name">Jane Jameson - 28:18</span>
        </article>
        <article>
            <span class="womens_name">Lucy McMullan - 26:09</span>
        </article>
        <article>
            <span class="womens_name">Alice Wonderland - 18:58</span>
        </article>
        <article>
            <span class="womens_name">Jane Jameson - 24:41</span>
        </article>
        </section>

        <div id="content">
        </div>

CSS

ul:last-child { 

     -moz-column-count: 4;
     -moz-column-gap: 20px;
     -webkit-column-count: 4;
     -webkit-column-gap: 20px;
     column-count: 2;
     column-gap: 10px;
     text-align: center;
 }

 #Mresults {

    margin-left: 360px;
}

Answer 1

您可以循环遍历所有<article>，然后获取每篇文章中的名称和时间，以用作表格单元格的文本。

＆＃13;

$(document).ready(function(){
    var resultsTable;
    
    $('#Mresults').click(function(){
      if (typeof resultsTable == "undefined") {
        resultsTable = $('<table border="1" id="resultsTable" />').append('<tr><th>Competitor</th><th>Time</th></tr>').appendTo('#content');
      }
      $('#mens_results article').each(function(){
        var $this = $(this);
        resultsTable.append('<tr><td>' + $this.find('.mens_name').text()  + '</td><td>' + $this.find('.mens_time').text() + '</td></tr>' );
      }); 
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Mens Results' id='Mresults' />
<div id="textHolder">
    <section id="mens_results">
    <article>
        <span class="mens_name"> Ben Chalmers</span>
        <span class="mens_time"> 30:00</span>
    </article>
    </section>
    <div id="content">
    </div>
</div>

＆＃13;

将表格附加到网页

1 个答案: