1

列を展開して、その中に一連の行を表示したいと思います。

私が達成しようとしていること：

元の出力

私がこれまでに達成したこと

私の試み

私のコード：

<table style="background-color:lightgreen"  border="1">
 <tr >
     <td>Id</td>
     <td>Name</td>
     <td>Col1</td>
     <td>Col2</td>
     <td>Group Related Column (value for each expanded cell)</td>
     <td>Col4</td>
 </tr>
 <tr >
     <td  rowspan="5" >#1</td> 
     <td  rowspan="5">AFSBEESS1</td>
     <td rowspan="5">
         <tr><td>[-] Group Name</td></tr>
         <tr><td>#1 in Group</td></tr>
         <tr><td>#2 in Group</td></tr>
         <tr><td>#3 in Group</td></tr>
     </td>
    <td rowspan="5">
         <tr><td>[-] Group Name</td></tr>
         <tr><td>#1 in Group</td></tr>
         <tr><td>#2 in Group</td></tr>
         <tr><td>#3 in Group</td></tr>
     </td>

     <td>x</td>
     <td>x</td>
 </tr>

</ p>

私のフィドル入力：http：//jsfiddle.net/yDUZg/78/

同じことをするのに最適なテーブル形式は何ですか？

列を簡単にグループ化するのと同じ効果を実現するプラグインはありますか？

または問題へのより良いアプローチ？

ASP.NETで実行していますが、これは基本的なことなので、HTMLとしてタグ付けしています

4

3 に答える 3

1

http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspxのようなものを見ましたか?

このプラグインを使用すると、必要に応じてテーブルの行を折りたたんだり展開したりできます。

要素tr内にネストしているため、上記の html は間違っています。td列に追加rowspan="x"するときは、次の行では省略してくださいx。例えば、

<table>
<tr>
   <td rowspan="2">Funky</td>
   <td>Joy</td>
</tr>
<tr>
   <td>Fun</td>
</tr>
</table>

行スパンの概念について混乱しています - http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

今のところ、私はあなたが要求したことを行うJSFiddleを作成しました。この例は高度に専門化されており、一般化された方法では機能しない可能性があります。rowspanフィドルでは、 andcolspanプロパティを削除しました。それらの機能に慣れたら、自由に追加してください。

于 2012-12-03T15:57:59.990 に答える
0

おそらくJavaScriptでこれを行うことができます。次のようになると思います。

<script type="text/javascript">
...
// You could use these in an event (inside some callback function)

$('tr.expand').style.visibility = 'hidden'
$('tr.expand').style.visibility = 'visible'

// OR you could use these...

$('tr.expand').show();
$('tr.expand').hide();
...
</script>

<!-- And then of course the group of <tr>'s you want to expand 
     on an event would all have the same class -->

<table>
...
<tr class="expand">
    <td>...</td>
</tr>
<tr class="expand">
    <td>...</td>
</tr>
...
</table>
于 2012-12-03T15:51:48.713 に答える
0

テーブルを使用することに設定されている場合は、それらをネストしてみませんか? 行をセル内に表示したい場合は、別のテーブルを追加するだけです。

于 2012-12-03T15:44:34.673 に答える