一次只顯示一個隱藏表格行

我有一個表格，其中每個第二個表格行的類名都是「hideme」。在我的css文件中，我做了.hideme {display：none}一次只顯示一個隱藏表格行

隱藏行包含有關它上面的行的選項/信息。我的目標是當點擊上面的行時，使用jquery切換隱藏行的開啓/關閉。我已經成功了，但代碼有一個缺陷。我可以同時顯示多個隱藏行。這是不可取的。我想在任何時候只顯示一個隱藏的行，或者根本沒有。

我應該如何更改我的jQuery代碼以使我的表像我想要的那樣工作？

這是我的jQuery代碼：

$(document).ready(function() { 

$('#eventtable tr').click(function() { 
    $(this).closest("tr").next().toggle(); 
}); 
});

我的HTML/PHP如下：

while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) { 

     echo ' 
      <tbody> 
       <tr> 
        <td>' . $row['event'] . '</td> 
        <td>' . $row['dr'] . '</td> 
       </tr> 
       <tr class = "hideme"> 
        <form method="post" action="galleryHandler.php"> 
        <input type="hidden" name="Name" value="' . $row['name'] . '" />  
        <td><input type="password" class="input" name="password" size="25" maxlength="20"/></td> 
        <td><input type="submit" name="submit" value="Se fotosession" class="button2"/></td> 
        </form>   
       </tr> 
      </tbody> 
     '; 

    }

的問題已通過一種計算器用戶解決。然而，我仍然有一個問題，因爲我有隱藏行中的文本字段，我一開始沒有提到它，當我對它們進行clikc時，它們就會消失。

來源

2013-04-05 Zahrec

發表您的HTML太.. – bipen 2013-04-05 09:34:33

這將這樣的伎倆：

$(document).ready(function() { 
    $('#eventtable tr:even').on('click', function() { 
     if ($(this).next().css('display') == 'none') { 
      $('#eventtable .hideme').hide(); 
      $(this).next().show(); 
     } 
     else { 
      $('#eventtable .hideme').hide(); 
     } 
    }); 
});

在這裏工作：

http://jsfiddle.net/aTN6v/

這將使切換行爲，我們的工作，但將關閉哪一個已經打開打開一個你之前點擊了。

來源

2013-04-05 10:05:49

非常感謝你。奇蹟般有效！發現我還需要更新版本的jquery。 – Zahrec 2013-04-05 10:31:07

Ups ...我在隱藏行中有一個文本框。當我點擊它來輸入一些文本時，隱藏的行再次消失。我該怎麼辦？ – Zahrec 2013-04-05 10:42:56

剛剛編輯過將'：even'添加到事件處理程序的初始選擇器中，因此只有通常可見的行響應點擊。 – 2013-04-05 13:04:06

試試這個：前

$(document).ready(function() { 

    $('#eventtable > tbody > tr > td').click(function() { 
     $(this).closest("tr").next().toggle(); 
    }); 
});

來源

2013-04-05 09:33:54

隱藏所有其他人：

$('#eventtable tr:even').hide();

來源

2013-04-05 09:37:29 user2248427

$(document).ready(function() { 

$('#eventtable tr').click(function() { 
    var nextRow = $(this).closest("tr").next(); 
    $('#eventtable tr.hideme').not(nextRow).hide(); 
    nextRow.toggle(); 
}); 
});

來源

2013-04-05 09:45:13

假設HTML在下面的結構

<table border="1"> 
    <tr><td>1.a</td><td>foo</td></tr> 
    <tr class="hideme"><td>1.b</td><td>foo</td></tr> 
    <tr><td>2.a</td><td>bar</td></tr> 
    <tr class="hideme"><td>2.b</td><td>bar</td></tr> 
    <tr><td>3.a</td><td>baz</td></tr> 
    <tr class="hideme"><td>3.b</td><td>baz</td></tr> 
</table>

一ND與CSS如下

.hideme { display:none; }

以下JS代碼應該做的伎倆

$('tr:even').click(function(){ 
    $(this).next().toggleClass('hideme'); 
});

檢查工作小提琴here。

來源

2013-04-05 09:54:26

一次只顯示一個隱藏表格行

回答

相關問題