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。假设用户点击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的新手，所以任何例子或帮助都非常感激？

Answer 1

这是你在找什么？

＆＃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;

Answer 2

您可以像这样使用Jquery

＆＃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;

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这样的东西，然后使用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--;
})

HTML show hide基于id（增量）

4 个答案: