dinamik bir HTML tablosunun bir kısmını gizleme

3 Cevap php

Bir HTML tabloya PHP ile sayfa işlenip mysql veri bir tablo var.

Veri bu tablo içinde, ben (diyelim) satır X odaklanmış gereken veri bir satır var

Ben satır X yukarıda ve aşağıda 2 satır gösterilmesini istiyorum ama satır X yukarı hareket gibi tüm diğerleri, gizli ve aşağı, bu satır X üst / alt kısmında olduğunda ben 4 göstermek istiyorum, neyin saklı olduğunu (tabii ki) değiştirmek istiyorum / Yukarıda aşağıda satırlar.

Ben statik içerik ve JQuery ile bu yapmış, ben gerektiği gibi sınıf adlarını satır X izlemek ve daha sonra uygulamak için ne kadar emin değilim

3 Cevap

Ben bu yüzden bir example here. ilginç bölümü görüntülemek için kardeşler seçmek için seçiciler yukarı attı bu ilginç isteği olduğunu düşündüm. Burada yazdığım bir fonksiyonudur.

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

Her satır, bir sınıf adı verin ve bir tıklatma olay işleyicisi ayarlayabilirsiniz. Kullanıcı ilk kez tıkladığında, tıklanan satırın dışında tüm tabloyu gizlemek ve altındaki dört satır halinde < 4, dört yukarıda eğer sıralı> row.last-4 veya üstünde ve iki altındaki iki (yukarıdakilerin hiçbiri doğru ise).

Temelde ben olsaydı ben prev () ve sonraki () fonksiyonları bakmak istiyorum dom manipülasyon var. Sen ("table> tr"), örneğin $, yaparak tablodaki satır sayısını alabilirsiniz. Uzunluğu.

Nuh

Tamam ben farklı satırları seçerek gösteren bir örnek yazdı. Kutusuna bir numara girin (1-10) ve düğmesine tıklayın. Satırlar 1 veya 10 üstünde veya altında bir satır ile (burada jQuery veya ne olursa olsun ile sınıf değişecek) gösterilir. Diğer sayılar (2-9) Seçme kendi kendini göstermek ve üstünde bir bir satır aşağıda gösterecektir.

Obvously bu sizin için ne istedi tam olarak değil - ama bu nasıl yapılabilir mantığı göstermek gerekir ...

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>

etiketler