Используйте то же самое шоу / скрыть JQuery, но с двумя таблицами, а не один

Question

Я нашел это онлайн, и оно работает именно так, как я хотел бы.

Однако я хотел бы использовать 2 таблицы отдельного контента,и не только один.

Возможно ли иметь такую ​​же функциональность "Смотрите 5 больше", но с двумя отдельными таблицами?

Как это достигается?

ЗдесьJavaScript для справки:

<script type="text/javascript">
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
var numRows = $('table').find('tr').length; // Total # rows

$(document).ready(function(){
 // Hide rows and add clickable div
 $('table')
  .find('tr:gt(' + (numShown - 1) + ')').hide().end()
  .after('<div id="more">Show <span>' + numMore + '</span> More</div>');

 $('#more').click(function(){
  numShown = numShown + numMore;
  // no more show more if done
  if ( numShown >= numRows ) $('#more').remove();
  // change rows remaining if less than increment
  if ( numRows - numShown < numMore ) $('#more span').html(numRows - numShown);
  $('table').find('tr:lt('+numShown+')').show();
 })

})
</script>

Большое спасибо за любые указатели.

Answer 1

var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
$(document).ready(function() {
    // Hide rows and add clickable div
    $('table').find('tr:gt(' + (numShown - 1) + ')').hide().end().after('<div class="more">Show <span>' + numMore + '</span> More</div>');

    $('.more').click(function() {
        var numRows = $(this).prev().find('tr').length; // Total # rows
        shown = $(this).prev().find('tr:visible').length + numMore;
        // no more show more if done
        if (shown >= numRows) $(this).remove();
        // change rows remaining if less than increment
        if (numRows - shown < numMore) $(this).find('span').html(numRows - shown);
        $(this).prev().find('tr:lt(' + shown + ')').show();
    });
})​;

рабочий пример: http://jsfiddle.net/cTuQ4/

Answer 2

Поместите определенные атрибуты id в каждую таблицу, а затем замените общий селектор 'table' на конкретный селектор id в # tableid.

$('#table1')...
$('#table2')...

Answer 3

Попробуйте это (не проверено):

<script type="text/javascript">
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
$(document).ready(function(){
    $('table').each(function(){
        var table=$(this);
        var numRows = table.find('tr').length; // Total # rows
        // Hide rows and add clickable div
        table
        .find('tr:gt(' + (numShown - 1) + ')').hide().end()
        .after('<div class="more">Show <span>' + numMore + '</span> More</div>');

        table.next('.more').click(function(){
            var more=$(this);
            numShown = numShown + numMore;
            // no more show more if done
            if ( numShown >= numRows ) more.remove();
            // change rows remaining if less than increment
            if ( numRows - numShown < numMore ) more.find('span').html(numRows - numShown);
            table.find('tr:lt('+numShown+')').show();
        })

    });
})
</script>