テーブルのヘッダに複数の行があり、テーブルのセルにcolspanがある場合、テーブルの列のサイズ変更が機能していません

Question

テーブルの列のサイズを変更するウィジェットを使用しています。そのテーブルのヘッダー<thead>に列数が等しい行があるが、colspan属性が行のセルに設定されている場合は機能していない場合は正常です。 6つの列を持つテーブルに2つの行があるとします。最初のセルにはcolspan=6があり、2番目のセルにはすべての列があります。この場合、2行目のサイズ変更が機能するはずです。しかし、それは動作していません。

理由を教えてもらえますか？あなたがCOLSPAN属性を使用しない場合は、上記の

<!DOCTYPE> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
    <style> 

table{ 
    table-layout: fixed; 
    border-collapse: collapse; 
    border: 1px solid black; 
} 
tr.last td { 
    border-bottom: 1px solid black; 
} 

td{ 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    position: relative; 
    white-space:nowrap; 
    padding: 2px 5px; 
    text-align: left; 
    overflow:hidden; 
} 

td.last { 
    border-right: none; 
} 

thead td div:first-child{ 
    text-overflow:ellipsis; 
    overflow:hidden; 
} 
tbody td div:first-child{ 
    overflow:hidden; 
} 

.scrollContainer { 
    overflow:auto; 
    width:700px; 
    height:auto; 
    display:inline-block; 
    border:1px solid red; 
} 
.sort1,.sort2{ 
height:20px; 
border:1px solid red; 
position:absolute; 
top:0px; 
} 
.sort1{ 
background:url('popup_trg_indicator.gif') 50% 50% no-repeat; 
width:10px; 
right:0px; 
} 

.sort2{ 
    background:url('sort_asc.gif') 50% 50% no-repeat; 
    width:12px; 
    right:10px; 
} 
.resizeHelper,.ui-resizable-e { 
    cursor: e-resize; 
    width: 10px; 
    height: 100%; 
    top: 0; 
    right: -8px; 
    position: absolute; 
    z-index: 100; 
    background:black; 
} 

</style> 
<div class="scrollContainer"> 
    <table id="MyTable" width="100%"> 
     <thead> 

      <tr> 
       <td style="width:200px;" colspan="6"> 
        <span >Column 1</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <!-- 
       <td style="width:200px;"> 
        <span >Column 2</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 

       <td style="width:300px;"> 
        <span >Column 3</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 

       <td style="width:150px;"> 
        <span >Column 4</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td style="width:200px;"> 
        <span >Column 5</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td class="last" style="width:100px;"> 
        <span >Column 6</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>     
       </td> 
       --> 
      </tr> 

      <!-- Second Row --> 
       <tr> 
       <td style="width:200px;"> 
        <span >Column 1.1</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td style="width:200px;"> 
        <span >Column 2.2</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td style="width:300px;"> 
        <span >Column 3.3</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 

       <td style="width:150px;"> 
        <span >Column 4.4</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td style="width:200px;"> 
        <span >Column 5.5</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div> 
       </td> 
       <td class="last" style="width:100px;"> 
        <span >Column 6.</span> 
        <div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>     
       </td> 
      </tr> 

     </thead> 
     <tbody> 
      <tr><td><div>Column 1</div></td><td><div>Column 2</div></td> 
       <td><div>Column 3</div></td><td><div>Column 4</div></td> 
       <td><div>Column 5</div></td><td><div>Column 6</div></td> 
      </tr> 

      <tr class="last"> 
       <td><div>Column 1</div></td><td><div>Column 2</div></td> 
       <td><div>Column 3</div></td><td><div>Column 4</div></td> 
       <td><div>Column 5</div></td><td><div>Column 6</div></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<div>Rama Rao</div> 

<script> 
/** 
* Plug-in 
* Enables resizable data table columns. 
**/ 
(function($) { 
    $.widget("ih.resizableColumns", { 
     _create: function() { 
      this._initResizable(); 
     }, 

     _initResizable: function() { 

      var colElement, colWidth, originalSize,colIndex; 
      var table = this.element; 

      this.element.find("thead td").resizable({ 
       handles: {"e": ".resizeHelper"}, 
       minWidth: -10, // default min width in case there is no label 
       // set correct COL element and original size 
       start:function(event, ui) { 
        colIndex = ui.helper.index() + 1; 
        colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")"); 
        colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width 
        originalSize = ui.size.width; 
       },     

       // set COL width 
       resize: function(event, ui) { 
        var resizeDelta = ui.size.width - originalSize;      
        var newColWidth = colWidth + resizeDelta; 
        colElement.width(newColWidth); 

        // height must be set in order to prevent IE9 to set wrong height 
        $(this).css("height", "auto"); 
       } 
      }); 
     } 

    }); 
})(jQuery); 
</script> 

<script> 
$('#MyTable').resizableColumns(); 
</script> 

Answer 1

プラグインは素晴らしいです：

は、ここに私のコードです。

colIndex = ui.helper.index() + 1; 
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")"); 

上記のコード行は、からあなたが言及したプラグインであり、その上の要素を持つテーブル内の同じ列インデックスを共有するすべての要素をキャプチャを担当しています。

この状況をよく理解するには、スクリプトのどこにでも次の行を追加します。どちらも

（私は本当に大好き）上記のDataTableのような他の偉大なjQueryのプラグインはありますか：

$(document).ready(function() { 
    $("#MyTable tr td").each(function() { 
     $(this).html($(this).index()); 
    }); 
}); 

これは、各セルの列インデックスを持つテーブルを移入しませんcolspanシナリオの回答。

EDIT おそらく、私はそれが不可能であるという考えを示していたでしょう。 複数の列にまたがるセルがあることを知らせて、このプラグインにパッチを当てることができると付け加えたいと思います。しかし、あなたは、いくつかのケースを考慮に入れなければならないと言いました。