logo标签列表

点击切换 JQuery 行

jqueryhtml-tablerowexpand
5

我试图在单击具有特定id的行时隐藏/显示一组子行。

通过大量搜索网络和尝试，我得到了下面的代码。

唯一的问题是，由于某种原因，此代码仅隐藏/显示第一组行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
           <title>Test</title>

           <script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>

           <script type="text/javascript">

             $(document).ready(function()
             {
                 $('#rowToClick').click(function ()
                 {
                     $(this).nextAll('tr').each( function()
                     {
                         if ($(this).is('#rowToClick'))
                        {
                           return false;
                        }
                        $(this).toggle();
                     });
                 });
             });
           </script>
         </head>          

<body>
<table>
    <tr id="rowToClick"><td>ClickMe</td></tr>
    <tr id="Tr1"><td>Toggled</td></tr>
    <tr id="Tr2"><td>Toggled</td></tr>
    <tr id="Tr3"><td>Toggled</td></tr>
    <tr id="Tr4"><td>Toggled</td></tr>
    <tr id="Tr5"><td>Toggled</td></tr>
    <tr id="rowToClick"><td>ClickMe</td></tr>
    <tr id="Tr6"><td>Toggled</td></tr>
    <tr id="Tr7"><td>Toggled</td></tr>
    <tr id="Tr8"><td>Toggled</td></tr>
    <tr id="Tr9"><td>Toggled</td></tr>
    <tr id="Tr10"><td>Toggled</td></tr>
</table>
</body>

</html>

有没有人对代码有建议和/或可能的重写？

---------- 更新 - 最终解决方案 -----------

根据Brandon的意见，我最终采用了以下解决方案，因为我想要更多嵌套并具有相同行为，类似于可折叠的树形视图。 不幸的是，这意味着我必须添加一个额外的属性来跟踪状态，但是目前我可以接受这种方式，直到我找到另一种方法（例如检查下一行的可见性）。

         $(document).ready(function () {
             toggleRows('.module','.namespace');
             toggleRows('.namespace','.type');
             toggleRows('.type','.member');
         });

         function toggleRows(parentClass,subClass)
         {
            $(parentClass).click(function () {

                if( $(this).attr("value")=="collapsed")                 
                {
                  $(this).attr("value","expanded");
                  $(this).nextUntil(parentClass).filter(subClass).toggle(true);
                }
                else
                {
                  $(this).attr("value","collapsed");
                  $(this).nextUntil(parentClass).attr("value","collapsed");
                  $(this).nextUntil(parentClass).toggle(false);
                }       

            });
         }
你有没有考虑使用像tablesorter这样的插件？http://blog.pengoworks.com/index.cfm/2008/3/28/Finished-jQuery-Tablesorter-mod-for-Collapsible-Table-Rows - iivel
使用 .data() 替代 .attr()，更加合规：$(this).data("value") 和 $(this).data("value", "expanded")。另外，链式调用以避免扫描 DOM 2 次：$(this).nextUntil(parentClass).data("value","collapsed").toggle(false); - Brandon
6个回答
7

首先，您不能使用相同的id设置多行。请将id设置为"rowToClick"的css类：

<tr class='rowToClick'><td>click me</td></tr>

接下来，这应该可以工作：
$(document).ready(function()
         {
             $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); });
         });
2

  • Take a look at this fiddle
    Using the :not() selector, you can select all tr elements that do not have the id/class you want filtered out: 

    $('.rowToClick').click(function ()
{
    $('tr:not(.rowToClick)').toggle(); 
    //toggle all rows on the page that 
    //do not have the class rowToClick
});

  • Note that you cannot have two elements with the same id - you have two rows with the id rowToClick. Use a class instead.

2
这是因为在文档中每个id只能使用一次。您应该改用class属性，并在jquery代码中使用$(".rowToClick")选择器访问具有class rowToClick的项目。
希望这可以帮到您。
安迪
1

我相信这是期望的行为：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            // Also, just as an extra, use "context" to limit the scope of any jQuery selector-search.
            // That way on large pages your selector doesn't search through the whole page,
            // it only searches the tables HTML.
            // Doing so is a short-cut for: $('#tblMyTable').find('tr.clickTrigger');
            var context = $('#tblMyTable'); 

            $('tr.clickTrigger', context).click(function() {

                $(this).nextAll('tr').each(function() {

                    if ($(this).is('tr.clickTrigger'))
                        return false;

                    $(this).toggle();
                });
            });
        });
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tblMyTable" cellpadding="0" cellspacing="0">
            <tr class="clickTrigger">
                <td>ClickMe</td>
            </tr>
            <tr id="Tr1">
                <td>Toggled</td>
            </tr>
            <tr id="Tr2">
                <td>Toggled</td>
            </tr>
            <tr id="Tr3">
                <td>Toggled</td>
            </tr>
            <tr id="Tr4">
                <td>Toggled</td>
            </tr>
            <tr id="Tr5">
                <td>Toggled</td>
            </tr>
            <tr class="clickTrigger">
                <td>ClickMe</td>
            </tr>
            <tr id="Tr6">
                <td>Toggled</td>
            </tr>
            <tr id="Tr7">
                <td>Toggled</td>
            </tr>
            <tr id="Tr8">
                <td>Toggled</td>
            </tr>
            <tr id="Tr9">
                <td>Toggled</td>
            </tr>
            <tr id="Tr10">
                <td>Toggled</td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
0
我会将你的代码改成这样：
<tr class="rowToClick" rel="1"><td>ClickMe</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="row1Collapse"><td>Toggled</td></tr>
<tr class="rowToClick" rel="2"><td>ClickMe</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>
<tr class="row2Collapse"><td>Toggled</td></tr>

然后，就像这样：
$('.rowToClick').click(function()
{
    var rel = $(this).attr('rel');

    $('.row' + rel + 'Collapse').show(); // or hide, you get the idea
});
0
<script>
    function padre(id){
                         var pa=$('.rowToClick_'+id);
                         $(pa).nextAll('tr').each( function(){
                            if ($(this).is('.rowToClickEnd_'+id))
                            {
                                $(this).toggle();
                                return false;
                            }
                            $(this).toggle();
                        });   
                     }
               </script>

    <table>
        <tr class="rowToClick_1"><td><a href="javascript:padre('1')">+</a>Categoria 1</td></tr>
        <tr id="Tr1" class="rowToClick_1_1"><td><a href="javascript:padre('1_1')">+</a>Categoria 1_1</td></tr>
        <tr id="Tr1_1"><td>Categoria 1_1_1</td></tr>
        <tr id="Tr1_2" class="rowToClickEnd_1_1"><td>Categoria 1_1_2</td></tr>
        <tr id="Tr2"><td>Categoria 1_2</td></tr>
        <tr id="Tr3"><td>Categoria 1_3</td></tr>
        <tr id="Tr4"><td>Categoria 1_4</td></tr>
        <tr id="Tr5" class="rowToClickEnd_1"><td>Toggled</td></tr>
        <tr class="rowToClick"><td>ClickMe</td></tr>
        <tr id="Tr6"><td>Toggled</td></tr>
        <tr id="Tr7"><td>Toggled</td></tr>
        <tr id="Tr8"><td>Toggled</td></tr>
        <tr id="Tr9"><td>Toggled</td></tr>
        <tr id="Tr10" class="rowToClickEnd"><td>Toggled</td></tr>
    </table>
它适用于不同的级别。 - Gaston Nina
请在您的答案中添加一些关于它如何工作的信息，这将有助于其他人。 - Cristiano Fontes
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接