動態地隱藏HTML表格的一部分

Question

我有一張從通過PHP在頁面上呈現的數據表格到一個HTML表格。

在這個表中的數據，我有應該被聚焦的一行數據（我們稱之爲）一行十

我想上面和下面，以顯示行X的2行，但所有其他隱藏，因爲X行上下移動，這會改變（顯然）隱藏的內容，當X行在頂部/底部時，我想在下面/上面顯示4行。

我與靜態內容和JQuery這樣做，我只是不確定如何跟蹤X行，然後根據需要

Answer 1

我認爲這是一個有趣的要求，所以我扔了一個example here.有趣的部分是選擇的兄弟姐妹，顯示選擇。這是我寫的一個函數。

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

您可以顯示隱藏的正常方式和基於當前行中專注於應用的類名稱改變div的innerHtml焦點。 可以說有4個div用來存放四行數據，那麼如果焦點在div 2上，那麼它將包含內部html中的第2行數據。隨着焦點移動或onchange，div 2中的內容將保持不斷變化，基於哪一行焦點。我希望漂移有幫助

Answer 3

你可以給每一行一個類名，並設置一個點擊事件處理程序。當用戶第一次點擊時，隱藏整個表格，除了被點擊的行以外，如果行< 4，則隱藏整個表格，如果行> row.last-4，則上面四個，或者上面兩個和下面兩個（如果上述兩者都不是真正）。

基本上它是dom操作，所以我會看看prev（）和next（）函數，如果我是你。您可以通過執行來獲取表中的行數，例如$（「table> tr」）.length。

諾亞

Answer 4

好的我寫了一個例子說明選擇不同的行。在框中輸入一個數字（1 - 10）並點擊按鈕。第1行或第10行將顯示（在這裏，您將使用jQuery或其他方式更改您的課程），並在上方或下方添加一行。選擇其他數字（2 - 9）將顯示其自身，並顯示上面一行和下面一行。

Obvously這不正是你問什麼 - 但應該說明的是如何可以做到這一點的邏輯...

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>