show hide jquery table rows for imported xml data

问题

I was trying to do the following, but stuck somewhere at the point where to show hide table row elements. What I did is importing xml to html through jquery library as the following:

$(document).ready(function(){
 $.ajax({
  type: "GET",
  url: "test.xml", 
  dataType: "xml",
  success: function(xml) {  
   $(xml).find('event').each(function(){    
    var Col0 = $(this).find('title').text();
    var Col1 = $(this).find('country').text();
    var Col2 = $(this).find('date').text();
    var Col3 = $(this).find('time').text();
    var Col4 = $(this).find('course').text();
    var Col5 = $(this).find('topic').text();
    var Col6 = $(this).find('pre-course').text();
    $('<tr></tr>').html('<th>'+Col0+'</th><td>'+Col1+'</td><td>'+Col2+'</td><td>'+Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td><td>'+Col6+'</td>').appendTo('#test');
   });
  }
 });
});

I added some html to make things work like this:

     <table id="test">
       <tr><td></td><th>country</th>
        <th>Date</th><th>time</th>
         <th>course</th><th>topic</th>
          <th>pre-course</th></tr>
     </table>

Everything at this point is working well and the table is fully displayed. The issue comes up when I try to use the following java code to hide all table rows expect the first 5 rows.

$(function() {
/* initial variables */
var numRows = $('#test').find('tr').length;
var SHOWN = 5;
var MORE = 5;

/* get how many more can be shown */
var getNumMore = function(ns) {
    var more = MORE;
    var leftOver = numRows - ns;
    if((leftOver) < more) {
        more = leftOver;
    }
    return more;
}
/* how many are shown */
var getInitialNumShown = function() {
    var shown = SHOWN;
    if(numRows < shown) {
        shown = numRows;
    }
    return shown;
}
/* set how many are initially shown */
var numShown = getInitialNumShown();

/* set the numMore if less than 20 */
var numMore = getNumMore(numShown);

/* set more html */
if(numMore > 0) {
    var more_html = '<p><button id="more">Show <span style="font-weight: bold;">' + numMore + '</span> More...</button></p>';
    $('#test').find('tr:gt(' + (numShown - 1) + ')').hide().end().after(more_html);
}
$('#more').click(function(){
    /* determine how much more we should update */
    numMore = getNumMore(numShown);
    /* update num shown */
    numShown = numShown + numMore;
    $('#test').find('tr:lt('+numShown+')').show();

    /* determine if to show more and how much left over */
    numMore = getNumMore(numShown);
    if(numMore > 0) {
        $('#more span').html(numMore);
    }
    else {
        $('#more').remove();
    }
});

});

when I execute the code, the show hide javascript get neglected and all table rows elements show up...

any idea how to display on the first 5 rows only and then whenever I click show more, more 5 elements show up and so on!!

Thanks

来源：https://stackoverflow.com/questions/18351936/show-hide-jquery-table-rows-for-imported-xml-data

标签

javascript