2017-04-11 146 views
0

我很抱歉,如果這已被問到其他地方,我已經在這裏看到一些類似於這個問題的其他問題,但我還沒有找到這個具體問題。摺疊表格行

我正在使用Twitter Bootstrap 3,並且我有一張數據表,用戶應該可以點擊該行並在該行的下面,另一行將顯示一個表單以允許他們添加/輸入有關上面一排。

我已經成功地讓行在點擊時摺疊和展開。當行切換時,該行顯示正確,但是一旦展開或摺疊完成,即使設置了colspan,行也會壓縮到第一列。

下面是我所談論的圖片:

在擴張之前首發: Prior to expansion starting

在膨脹過程: During expansion

擴建完成後: After expansion is complete

爲什麼會發生這種情況?我正在使用ASP.net,但除了分配可摺疊容器的ID並將其全部嵌套在數據重複器中之外,沒有使用ASP控件。我不認爲ASP會是罪魁禍首,但我不確定。

這難道不可能嗎?

下面是,在上面的例子中擴展TR的代碼:

<tr> 
    <td class="collapse" id="<%# DataBinder.Eval(Container.DataItem, "ID") %>" colspan="6"> 
     <div class="well col-sm-12"> 
      <div class="form-horizontal" role="form"> 
       <!-- FORM CONTENTS GO HERE --!> 
      </div> 
     </div> 
    </td> 
</tr> 

任何幫助,將不勝感激。

+0

看起來,當「in」類應用於td後崩潰完成是罪魁禍首。通過使用Chrome進行調試,如果我刪除「摺疊」類並將其替換爲「摺疊」,則顯示正常。有沒有辦法來解決這個問題? –

回答

0

我找到了解決方案。我只是將崩潰的功能移動到tr標籤而不是td標籤,如下所示:

<tr class="collapse" id="<%# DataBinder.Eval(Container.DataItem, "ID") %>"> 
    <td colspan="6"> 

現在很好用!