Question

点击我要显示的按钮隐藏表格的tr。但我想跳过表格的第一个tr，我们总是可见。我必须显示隐藏表格中的所有其他tr怎么能我们在jquery中做到这一点

表格

<table id="tableid">
  <tr><td>a</td></tr>
  <tr><td>b</td></tr>
  <tr><td>c</td></tr>
  <tr><td>d</td></tr>
</table>

Answer 1

尝试以下操作，我没有检查过，但它应该可以正常工作：

<table id="tableid">
  <tr><td>a</td></tr>
  <tr><td>b</td></tr>
  <tr><td>c</td></tr>
  <tr><td>d</td></tr>
</table>

<button class="click">Hide</button>

<script>
    $(function() {
        $('.click').click(function() {
            if ($('#tableid tr:last-child').is(':visible') === true) {
                $('#tableid tr:not(:first-child)').hide();
                $(this).text('Show');
            } else {
                $('#tableid tr:not(:first-child)').show();
                $(this).text('Hide');
            }
        });
    });
</script>

请在此处查看我的jsfiddle，并附上一个工作示例。

Answer 2

你可以这样做：

HTML：

<table id="tableid">
  <tr><td>a</td></tr>
  <tr><td>b</td></tr>
  <tr><td>c</td></tr>
  <tr><td>d</td></tr>
</table>

<input id="hide" type="button" value="Hide"/>

JQUERY：

   $("#hide").click(function(){

    $('table#tableid > tbody > tr').not(':first').hide();

})

您可以使用toggle() 隐藏/显示效果：

$('table#tableid > tbody > tr').not(':first').toggle("show");

FIDDLE EXAMPLE

Answer 3

您可以使用切换方法：

<强> HTML

<table id="tableid">
  <tr><td>a</td></tr>
  <tr><td>b</td></tr>
  <tr><td>c</td></tr>
  <tr><td>d</td></tr>
</table>
<p><button id="showHide">Hide Rows</button></p>

<强> JQuery的

$stat = 1;
$("#showHide").click(
    function()
    {
        if($stat == 1)
        {
            $('#tableid tr:not(:first-child)').hide();
            $(this).text("Show Rows");
            $stat = 0;
        }
        else
        {
            $('#tableid tr:not(:first-child)').show();
            $(this).text("Hide Rows");
            $stat = 1;
        }
    }
);

http://jsfiddle.net/zyLcb/

Answer 4

最简单的解决方案是使用toggle()：

// select the 'tr' that is/are the ':first-child' of its parent,
// use 'on()' to bind the click event-handler:
$('#tableid tr:first-child').on('click', function(){
    // '$(this)' is the jQuery wrapped node upon which the click occurred,
    // use 'nextAll()' to find all subsequent sibling 'tr' elements,
    // 'toggle()' (show, if they're hidden; hide if they're shown):
    $(this).nextAll().toggle();
});

JS Fiddle demo

要使用纯JavaScript，您只需使用style属性：

function toggleSiblings (){
    // 'this' is the clicked element:
    var target = this;

    // continue the loop while there is a nextElementSibling:
    while (target.nextElementSibling) {
        // set the 'display' to 'table-row' if it's currently 'none',
        // set it to 'none' if it's *not* currently 'none':
        target.nextElementSibling.style.display = target.nextElementSibling.style.display === 'none' ? 'table-row' : 'none';
        // point the 'target' node-reference to the nextElementSibling, and continue:
        target = target.nextElementSibling;
    }
}
// using 'document.querySelector()' to find the first element that is a 'tr'
// and is the ':first-child' of its parent:
var firstChild = document.querySelector('tr:first-child');

// using addEventListener() to bind event-handling:
firstChild.addEventListener('click', toggleSiblings);

JS Fiddle demo

或者您甚至可以使用CSS：

<input type="checkbox" id="firstRowToggle" />
<table id="tableid">
    <tr>
        <td><label for="firstRowToggle">a</label></td>
    </tr>
    <tr>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
    </tr>
    <tr>
        <td>d</td>
    </tr>
</table>

使用CSS：

/* 'tr' elements that are general-siblings of the 'tr:first-child',
   that are teh child of a 'table' element which is the adjacent-sibling
   of the element with the given 'id' */
#firstRowToggle + table tr:first-child ~ tr {
    /* display as normal */
    display: table-row;
}

/* if the checkbox is checked, then the non-first-child 'tr' elements
   are set to be hidden/not-displayed */
#firstRowToggle:checked + table tr:first-child ~ tr {
    display: none;
}

JS Fiddle demo

显示隐藏表tr跳过表的第一个tr;

4 个答案:

HTML：

JQUERY：