我正在使用一个小部件(我在网上找到它)来调整表格列的大小。如果表格标题 <thead>，它工作正常具有列数相同的行，但如果 colspan 则不起作用属性设置为一行的单元格。
假设表中有两行六列。第一个单元格将有 colspan=6第二个将包含所有列。在这种情况下，调整大小应该适用于第二行。但它不起作用。
谁能告诉我原因？
这是我的代码:
<!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>
最佳答案
如果您不使用 colspan 属性，上面的插件会很棒。
colIndex = ui.helper.index() + 1;
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
以上代码行来自您提到的插件，负责捕获表中与它们上面的元素共享相同列索引的所有元素。
为了更好地了解情况，请在脚本的任意位置添加以下行。
$(document).ready(function() {
$("#MyTable tr td").each(function() {
$(this).html($(this).index());
});
});
这将使用每个单元格的列索引填充表格:
其他很棒的 jQuery 插件，如上面提到的 DataTables(我非常喜欢)也没有针对 colspan 场景的答案。
编辑 也许我是想告诉你这是不可能的。 我想补充一点，您可以通过让它知道有些单元格跨越不止一列来修补这个插件。不过话虽如此，您还是必须考虑几个边缘情况。
关于jquery - 如果表格标题有多行并且 colspan 到表格单元格，则表格列大小调整不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15294611/