So zeigen 5 mehr Zeilen einer Tabelle auf den Klick auf einen button mit Hilfe von jQuery

Mir die pre-load eine Tabelle mit allen Zeilen. Aber ich möchte nur zeigen nur die top-10-Zeilen, die innerhalb der <tbody> tag und jetzt jeden <tr> in der Tabelle.

So, hier ist was ich bisher getan habe:

var trs =  $("#internalActivities > table > tbody > tr");
trs.hide();
trs.slice(0, 9).show(); 

$("#seeMoreRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr:hidden").slice(0, 10).show();          
});

$("#seeLessRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(9, 19).hide();          
});

Das Problem mit dem code oben:

  1. Sieht es für die <tr> nur mit der <tbody> tag.
  2. Die sehen weniger die Schaltfläche entfernen müssen 10 Zeilen von unten nach oben und nicht alle von Ihnen.
  3. Ich mich verstecken muss Sie die Taste seeMoreRecords wenn alle von Ihnen angezeigt werden.
  4. Wenn der minimum-Zeile angezeigt wird, dann verstecken Sie die seeLessRecords - Taste.

Endgültige Aussehen mein Skript zeigt 10 Zeilen standardmäßig, und wenn der Benutzer klicken Sie auf weitere siehst du dann 10 mehr. Es ist also eine Schrittweite von 10 zu einer Zeit, und drücken Sie max dann verstecken die finden Schaltfläche "mehr". Weniger ist nur sichtbar, wenn mehr als 10 Zeilen angezeigt.

InformationsquelleAutor Mike | 2013-06-22
  1. 11

    1. Können Sie den Selektor $("#internalActivities tr") die wählen alle <tr>'s, unabhängig von einer <tbody> oder nicht

    2. Müssen Sie zum speichern der aktuell angezeigten index in einer separaten variable oder Berechnung des aktuellen index basiert auf, wie viele Elemente ausgewählt werden (verwenden Sie die .length Eigenschaft)

    3. Überprüfen Sie die aktuelle Anzahl der Elemente angezeigt und ein - /ausblenden der entsprechenden Schaltflächen.

    Beispiel

    HTML -

    <table id="internalActivities">

</table>
<input type="button" id="seeMoreRecords" value="More">
<input type="button" id="seeLessRecords" value="Less">

    Javascript

    for (var i=0;i<21;i++) {
    $('#internalActivities').append('<tr><td>my data</td></tr>');
}

var trs = $("#internalActivities tr");
var btnMore = $("#seeMoreRecords");
var btnLess = $("#seeLessRecords");
var trsLength = trs.length;
var currentIndex = 10;

trs.hide();
trs.slice(0, 10).show(); 
checkButton();

btnMore.click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(currentIndex, currentIndex + 10).show();
    currentIndex += 10;
    checkButton();
});

btnLess.click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(currentIndex - 10, currentIndex).hide();          
    currentIndex -= 10;
    checkButton();
});

function checkButton() {
    var currentLength = $("#internalActivities tr:visible").length;

    if (currentLength >= trsLength) {
        btnMore.hide();            
    } else {
        btnMore.show();   
    }

    if (trsLength > 10 && currentLength > 10) {
        btnLess.show();
    } else {
        btnLess.hide();
    }

}

    Erstellte ich eine jsFiddle demo um dies in Aktion zu sehen.

    • Dieser code fügt Zeilen in eine Tabelle. Ich habe bereits die Zeilen, aber ich möchte, um zu zeigen/verstecken. Ich mache keine Reihe
    • Die generation der Zeilen ist nur zum testen. Sie können vollständig entfernen die for-Schleife am Anfang.
    • Ich sehe. Ich war auf der Suche in den Prüf-code und nicht den code, den Sie hier gepostet. Ich versuchte Ihren code, aber es gibt Probleme. die seeLEssRecords-Taste nicht verstecken. Auch sehe ich nicht mehr als 10 Datensätze, auch gedacht, es sollte mehr als 10 Aufzeichnungen.
    • Mhm - sorry, ich verstehe nicht ganz, was nicht funktioniert für Sie. Haben Sie versucht, die Geige? Funktioniert wie hier beschrieben. Welche jQuery-Version verwendest du? Ich aktualisierte den code oben und mal ein wenig mehr inline mit dem original-code und entfernt ein un-nötig zu überprüfen.
    • Jetzt ist es Arbeit. Nach dem letzten update ist es gut. Ich danke Ihnen sehr 🙂
    InformationsquelleAutor Keeper
  2. 0

    1) Wenn Sie den tr-tags nicht nur mit dem tbody-tag und schreiben Sie Ihre jquery-wählen Sie, um

    $("#internalActivities > table tr");

    2) Sie können die Anzahl der Zeilen und verwenden, die zählen in der Scheibe

    var $records = $("#internalActivities tr");
$records.slice($records.length - 10, $records.length).hide();

    3) Überprüfen Sie die Anzahl der ausgeblendeten Zeilen in der seeMoreRecords click-Ereignishandler

    if ($("#internalActivities tr:hidden").length === 0) {
    $("#seeMoreRecords").hide();
}

    4) Überprüfen Sie die Anzahl der angezeigten Zeilen

    if ($("#internalActivities tr").not(":hidden").length <= 10) {
    $("#seeLessRecords").hide();
}
    • Ich wirklich wollen ein - /ausblenden nur die tr, die mit in den tbody und nicht alle von Ihnen.
    • In diesem Fall Frage 1) ist kein Problem und Ihr Selektor richtig ist.
    InformationsquelleAutor Zoltan Kochan
Schreibe einen Kommentar