Блог

Я пытаюсь создать таблицу, тогда как, когда пользователь нажимает на одну из строк, блок будет скользить вниз по той же длине таблицы. Я пытался использовать div, но, полагаю, вы не можете разместить div нигде в таблице, кроме как внутри ячейки. Вот мой текущий код:

 <table class="table-carrier">
        <thead>
            <tr>
                <th>
                    <%= Html.Encode(SFSys.Inst.I18n.GetText("Name")) %>
                </th>
                <th>
                    <%= Html.Encode(SFSys.Inst.I18n.GetText("Value")) %>
                </th>
                <th><!-- Data to be added later --></th>
            </tr>
        </thead>
        <% foreach (var Carrier in ViewData.Model.Carriers) {  %>
        <tbody>
            <tr>
                <td class="carrier-row" onclick="$(this)
                .closest('tbody')
                .next('.section')
                .slideToggle('fast');">
                    <%= Html.Encode(Carrier.Name) %>
                </td>
                <td>
                    <%= Html.Encode(Carrier.Value) %>
                </td>
                <td>
                    <%using(Html.BeginForm("Action", "Form")) {%>
                        <input type="hidden" name="FormKey" id="FormKey" value="<%= this.Request.Url.Query %>" />
                        <input type="submit" name="action" value="<%= Html.Encode(SFSys.Inst.I18n.GetText("Change")) %>" onclick='scriptForward = true' />
                    <%}%>
                </td>
            </tr>
            </tbody>
            <tbody class="section">
            <tr>
                <td colspan="3">
                    <div >
                        <table>
                            <tr>
                                <td>left 1</td>
                                <td>right 1</td>
                            </tr>
                            <tr>
                                <td>left 2</td>
                                <td>right 2</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            </tbody>
        <% } %>
    </table>
  

Я могу заставить каждый раздел отображаться сам по себе, но когда он делает это, он изменяет мою таблицу, перемещает информацию из одной ячейки вниз, а затем растягивает ее. Есть ли способ заставить информацию скользить вниз по длине таблицы?

Хотя я не смог найти правильное решение, используя объекты jQuery Accordion, удалось создать то, что я искал. Более подробную информацию об этом можно найти на jQuery Accordion