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。

如何显示/隐藏用户单击的转发器表行

1 个答案: