HTMLショーの非表示<tr>

Question

は私が第一TRが常に表示されているテーブル構造を持っており、残りは隠されている：

<table> 
    <tr> 
    <td></td> // No id always show 
    </tr> 
    <tr id="1"> 
    <td style="display:none;"></td> 
    </tr> 
    <tr id="2"> 
    <td style="display:none;"></td> 
    </tr> 
    <tr id="3"> 
    <td style="display:none;"></td> 
    </tr> 
    <tr id="4"> 
    <td style="display:none;"></td> 
    </tr> 
    <tr id="5"> 
    <td style="display:none;"></td> 
    </tr> 
</table> 
<input type="button" id="show" value="show" /></td> 
<input type="button" id="hide" value="hide" /></td>  

は私がそこにIDに基づいて、隠されたTRを示したいと思います。ユーザーが表示をクリックすると、tr id = 2が表示され、ユーザーが再度表示をクリックすると、tr id = 3が表示されます。

JQuery hide <tr> based on <td> id

：非表示]ボタンは= 3

が、私はここに質問/回答の一部をTR IDをチェックしていますが、どれもこれまでの私の質問に合っていない、現在示されている 最後のTR IDを非表示になります

Showing/Hiding Table Rows with Javascript - can do with ID - how to do with Class?

私はちょうどフロントエンドをやっていると、まだjavascriptとjqueryに新しいので、任意の例や助けが大いに感謝していますか？

Answer 1

あなたは、私は、あなたの `​​`テーブルデータ/セルが隠されているので、あなたは `​​を`見せたい参照この

$(document).ready(function(){ 
 
    var id_num = 0;         // define the id number 
 
    $('#show').on('click',function(){ 
 
     id_num++;          // add +1 to the id number 
 
     $('#' + id_num).show(); // show tr with that id 
 
    }); 
 
    $('#hide').on('click',function(){ 
 
     $('tr:not(:nth-child(1)):visible:last').hide(); // hide the last visible tr but not the first one 
 
     id_num = $('tr:visible:last').attr('id') ? $('tr:visible:last').attr('id') : 0;      // check for tr id when hide if this isn't the first return id number if not return 0 
 
    }); 
 
});

tr[id]{ 
 
    display : none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>first</td> // No id always show 
 
    </tr> 
 
    <tr id="1"> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr id="2"> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr id="3"> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr id="4"> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr id="5"> 
 
    <td>5</td> 
 
    </tr> 
 
</table> 
 
<input type="button" id="show" value="show" /></td> 
 
<input type="button" id="hide" value="hide" /></td>

Answer 2

これはあなたが探しているものですか？

var trIndex = 0; 
 

 
document.getElementById("show").onclick = function() { 
 
    if(trIndex === 5) return; 
 
    trIndex += 1; 
 
    document.getElementById(trIndex).style.display = "table-row"; 
 
}; 
 

 
document.getElementById("hide").onclick = function() { 
 
    if(trIndex === 0) return; 
 
    document.getElementById(trIndex).style.display = "none"; 
 
    trIndex -= 1; 
 
};

tr:nth-child(n+2) { 
 
    display: none; 
 
}

<table> 
 
    <tr> 
 
    <td>0</td> // No id always show 
 
    </tr> 
 
    <tr id="1"> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr id="2"> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr id="3"> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr id="4"> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr id="5"> 
 
    <td>5</td> 
 
    </tr> 
 
</table> 
 
<input type="button" id="show" value="show" /></td> 
 
<input type="button" id="hide" value="hide" /></td> 

Answer 3

ボタン：

<input type="button" id="show" value="show" onclick="showHidden()"/> 
<input type="button" id="show" value="show" onclick="hideVisible()"/> 

Javascriptを：

function showHidden() { 
    $("td:hidden").first().show(); 
} 

function hideVisible() { 
    $("td:visible").last().hide(); 
} 

は、要素の残りの部分と気をつけて、あなたはtd.someclassのようなものを使用otの場合があります次にtd class = "someclass"となります。

Answer 4

var count = 0; 
$("show").on("click",function(ev){ 
    ev.preventDefault(); 
    if(count > 5) 
     return; 
    count++; 
    $("#"+count).show();  
}) 

$("#hide").on("click",function(ev){ 
    ev.preventDefault(); 
    if(count<=0) 
     return; 
    $("#"+count).hide(); 
    count--; 
})