HTML show hide基于id(增量)

时间:2017-05-03 01:51:55

标签: javascript jquery html css

我有一个表结构,其中第一个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。假设用户点击show,tr id = 2将显示,用户再次点击show tr id = 3将显示。隐藏按钮将隐藏 当前显示的最后一个tr id是tr id = 3.

我正在检查这里的一些问题/答案,但到目前为止还没有一个问题符合我的要求:

JQuery hide <tr> based on <td> id

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

我刚刚开始做前端,仍然是javascript和jquery的新手,所以任何例子或帮助都非常感激?

4 个答案:

答案 0 :(得分:1)

这是你在找什么?

&#13;
&#13;
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;
};
&#13;
tr:nth-child(n+2) {
  display: none;
}
&#13;
<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>     
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以像这样使用Jquery

&#13;
&#13;
$(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
  });
});
&#13;
tr[id]{
  display : none;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

按钮:

<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这样的东西,然后使用td class =“someclass”。

答案 3 :(得分:0)

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