1

我试图执行以下操作，但在显示隐藏表格行元素的地方卡住了。我所做的是通过 jquery 库将 xml 导入 html，如下所示：

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

我添加了一些 html 来使事情像这样工作：

     <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>

此时一切正常，表格已完全显示。当我尝试使用以下 java 代码隐藏所有表行（除了前 5 行）时，问题就出现了。

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

});

当我执行代码时，显示隐藏 javascript 被忽略，所有表格行元素都显示出来......

知道如何仅在前 5 行显示，然后每当我单击显示更多时，就会显示更多 5 个元素等等！

谢谢

4

0 回答 0