Tabelle Spalte Größe funktioniert nicht, wenn Tabelle Header hat mehrere Zeilen und colspan zu Tabelle Zelle

Question

Ich benutze ein Widget (ich habe es im Web), um die Größe der Tabelle Spalten. Es funktioniert gut, wenn der Tabellenkopf <thead> Zeilen mit der gleichen Anzahl von Spalten hat, aber nicht funktioniert, wenn das Attribut colspan auf Zelle einer Zeile gesetzt ist. Angenommen, es gibt zwei Zeilen in der Tabelle mit sechs Spalten. Die erste Zelle hat eine colspan=6 und die zweite wird alle Spalten haben. In diesem Fall sollte die Größenänderung für die zweite Zeile funktionieren. Aber es funktioniert nicht.

Kann mir jemand den Grund wissen lassen?

Hier ist mein Code:

<!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

Das Plugin oben ist toll, wenn Sie nicht das colspan Attribut verwenden Sie.

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

Die obigen Codezeilen sind von dem Plug-in die Sie erwähnt haben und sind für alle Elemente erfasst, die die gleiche Spaltenindex in der Tabelle mit dem Element über ihnen teilen.

Um die Situation besser zu verstehen, fügen Sie die folgenden Zeilen irgendwo in Ihrem Skript hinzu.

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

Dies wird eine Tabelle mit den Spaltenindex jeder seiner Zellen füllen:

auch nicht andere große jQuery Plugins wie den oben genannten Datentabellen haben (was ich wirklich lieben) Antworten für Colspan-Szenarien.

BEARBEITEN Vielleicht gab ich Ihnen die Idee, dass es nicht möglich ist. Ich möchte hinzufügen, dass Sie dieses Plug-in patchen können, indem Sie es wissen lassen, dass es Zellen gibt, die sich über mehr als eine Spalte erstrecken. Allerdings müssen Sie mehrere Randfälle berücksichtigen.