如何显示/隐藏用户单击的中继器表行

Question

我有一个带有表格行的中继器控件，用于显示从数据库中获取的项目。

这是我的代码：

   <asp:Repeater ID="Repeater1" runat="server">
       <HeaderTemplate>
           <table id="grid">
               <thead>
                   <tr>
                       <th>PNo</th>
                       <th>Start Date</th>
                       <th>End Date</th>
                       ...
                   </tr>
               </thead>
               <tbody>
  </HeaderTemplate>
  <ItemTemplate>
      <tr>
          <td><%#Eval("PNo") %></td>
          <td><%#Eval("startDate") %></td>
          <td><%#Eval("endDate") %></td>
          ...                  
      </tr>
      <tr> --------> want to hide/show this zone of the table
          <td id="tdHidden" colspan="10" class="styleHiddenDiv">
            <div id="divHidden" class="hiddenRow">
                    some content..
           </div>
          </td>
      </tr> -----------
      <tr>
          <td colspan="10">
                  <span id="spn" onclick="showHide('tdHidden');">More..</span>
          </td>
      </tr>
  </ItemTemplate>
       <FooterTemplate>
           </tbody>
           </table>
       </FooterTemplate>
   </asp:Repeater>

我从数据库中获取 14 条记录。根据表格，这里每条记录有3行（tr）。

我想隐藏/显示表格中的第二个 tr。我是说;仅单击行跨越（更多）之前的 tr。

希望我能解释一下..

你能帮我弄清楚吗？

Answer 1

您已标记为 jquery，因此已标记为 jquery 解决方案。这是使用 jquery toggle 的方法。

在中继器中为您的 span 元素添加一个类名并移除 onclick 事件。

 <tr>
     <td colspan="10">
           <span id="spn" class="more">More..</span>
     </td>
 </tr>

还有你的 jquery 函数

$(function () {
    $('.more').on('click', function (e) {
       var elem = $(this).closest('tr').prev();
       elem.toggle();
    });
});

这是工作的Demo

更新：如果您想在页面初始加载时隐藏所有可切换行，请使用以下代码

$(function () {

    // hide all the toggable rows on page load
    $('.more').closest('tr').prev().css('display', 'none');

    $('.more').on('click', function (e) {
       var elem = $(this).closest('tr').prev();
       elem.toggle();
    });
});

或者如果您不想使用脚本来处理这个问题，那么您可以通过为可切换行设置style="display: none" 来使用css 来完成，原始代码应该可以正常工作。所以你的tr 会变成

<tr style="display: none">
     <td id="tdHidden" colspan="10" class="styleHiddenDiv">
          <div id="divHidden" class="hiddenRow">
              some content..
          </div>
     </td>
</tr>

我已根据您的新要求更新了原来的Demo。