Einen Teil einer HTML-Tabelle dynamisch verstecken

Question

Ich habe eine Tabelle von Daten von MySQL über PHP auf einer Seite in eine HTML-Tabelle gerendert.

Innerhalb dieser Tabelle von Daten, habe ich eine Reihe von Daten, die auf konzentrieren sollte (nennen wir es) Zeile X.

Ich möchte die zwei Reihen oberhalb und unterhalb Zeile X gezeigt werden, sondern auch alle anderen versteckt Wenn sich Zeile X nach oben und unten bewegt, ändert sich (offensichtlich), was ausgeblendet wurde. Wenn Zeile X oben/unten ist, möchte ich 4 Zeilen darunter/oben anzeigen.

Ich habe dies getan mit statischen Inhalten und JQuery, ich bin nur nicht sicher, wie Zeile X zu verfolgen und dann die Klassennamen gelten als

erforderlich

Answer 1

Ich dachte, das eine interessante Anfrage war so ich eine example here. Der interessante Teil der Wähler ist warf die Geschwister wählen anzuzeigen. Hier ist eine Funktion, die ich geschrieben habe.

function rowXMoved() 
{ 
    // hide all rows besides rowX 
    $('.tableCSS tr:not(.rowX)').hide(); 
    if($('.rowX').prev('tr').size() == 0) 
    { 
    // we are row number 1, show 4 more 
    $('.rowX').siblings('tr:lt(4)').show(); //:lt is less than(index) 
    } 
    else if($('.rowX').next('tr').size() == 0) 
    { 
    // we are the last row 
    // find the index of the tableRow to show. 
    var rowCount = $('.tableCSS tr').size(); 
    $('.rowX').siblings('tr:gt(' + (rowCount - 6) +')').show(); //:gt is greater than(index) 
    } 
    else 
    { 
    // show 2 rows before and after the rowX 
    // there is probably a better way, but this is the most straight forward 
    $('.rowX').prev('tr').show().prev('tr').show(); 
    $('.rowX').next('tr').show().next('tr').show(); 
    } 
} 

Answer 2

Sie verstecken die normale Art und Weise zeigen, können sich auf der aktuellen Zeile im Fokus und basiert Ändere den innerenHtml des div im Fokus. Sagen wir, es gibt 4 divs, die vier Datenzeilen enthalten. Wenn der Fokus auf div 2 liegt, enthält er die Daten der Zeile 2 im inneren html. Wenn sich der Fokus verschiebt oder ändert, ändert sich der Inhalt in div 2 basierend darauf, welche Zeile im Fokus ist. Ich hoffe, die Drift hilft

Answer 3

Sie könnten jeder Zeile einen Klassennamen geben und einen Click-Event-Handler setzen. Wenn der Benutzer das erste Mal klickt, blenden Sie die gesamte Tabelle bis auf die angeklickte Zeile und vier darunter aus, wenn Zeile < 4, vier oben bei Zeile> Zeile.Last-4, oder zwei oben und zwei unten (wenn keine der oben genannten Zeilen vorhanden ist wahr).

Im Grunde ist es dom Manipulation so dass ich einen Blick auf die zurück nehmen würde() und next() funktioniert, wenn ich du wäre. Sie können die Anzahl der Zeilen in der Tabelle ermitteln, indem Sie beispielsweise $ ("table> tr"). Length eingeben.

Noah

Answer 4

Okay, ich habe ein Beispiel geschrieben, das die Auswahl verschiedener Zeilen veranschaulicht. Geben Sie eine Zahl in das Feld ein (1 - 10) und klicken Sie auf die Schaltfläche. Zeilen 1 oder 10 werden angezeigt (hier ändern Sie Ihre Klasse mit jQuery oder was auch immer) mit einer Zeile darüber oder darunter. Wählen Sie andere Nummern (2 - 9) wird sich selbst zeigen, und zeigen Sie eine Zeile über und eine darunter.

Obvously ist dies nicht genau das, was Sie gefragt - aber es sollte die Logik veranschaulichen, wie das getan werden kann ...

Enter row: 
<input id="Text1" type="text" /> 

<input id="Button1" type="button" value="button" onClick="updateTable()"/> 

<!-- Example table, note the Ids --> 
<table id="yourTable"> 
    <tr><td id="row1">Row 1</td></tr> 
    <tr><td id="row2">Row 2</td></tr> 
    <tr><td id="row3">Row 3</td></tr> 
    <tr><td id="row4">Row 4</td></tr> 
    <tr><td id="row5">Row 5</td></tr> 
    <tr><td id="row6">Row 6</td></tr> 
    <tr><td id="row7">Row 7</td></tr> 
    <tr><td id="row8">Row 8</td></tr> 
    <tr><td id="row9">Row 9</td></tr> 
    <tr><td id="row10">Row 10</td></tr> 
</table> 

<script type="text/javascript"> 

    function updateTable() 
    { 
     var table = document.getElementById('yourTable'); 
     var row = parseInt(document.getElementById('Text1').value); 
     var rows = table.rows.length; 

     // Reset the classes, styles etc etc for each row 
     for (var i = 0; i < rows; i++) { 
      table.rows[i].style.visibility = 'hidden'; 
     } 

     // Subtract one as we start from 0. 
     row = row - 1; 

     // Top row, select the first and one below. 
     if (row == 0) { 
      table.rows[0].style.visibility = 'visible'; 
      table.rows[1].style.visibility = 'visible'; 
     } 

     // Rows in between. Select the middle, one above and one below. 
     if ((row > 0) && (row < rows - 1)) { 
      table.rows[row - 1].style.visibility = 'visible'; 
      table.rows[row].style.visibility = 'visible'; 
      table.rows[parseInt(row + 1)].style.visibility = 'visible'; 
     } 

     // Bottom row, select the last row and one above that. 
     if (row == rows - 1) { 
      table.rows[row].style.visibility = 'visible'; 
      table.rows[row - 1].style.visibility = 'visible'; 
     } 
    } 


</script>