带有 bz 代码的可调整大小的表列

Question

我按照bz's demo创建了一个可调整大小的表格列代码

但是当我创建超过 30 列时，代码不起作用。我正在创建的表非常简单：

<table class="resizable" border="1">
        <tr>
            <td name="col1" align="center">Column 1</td>
            <td name="col2" align="center">Column 2</td>
            <td name="col3" align="center">Column 3</td>
            <td name="col4" align="center">Column 4</td>
            <td name="col5" align="center">Column 5</td>
            <td name="col6" align="center">Column 6</td>
        </tr>
</table>

有没有人知道我应该更改哪一行以使代码正常工作？

Answer 1

为什么不自己做呢？使表格可调整大小非常简单：

首先将此添加到您的 onLoad：

$(".gridTableSeparator").bind("mousedown", function () {
    var that = $(this).parent();
    $("body").bind("mousemove", function (event) {
        that.attr("width", event.pageX - that.offset().left);
    });
    $("body").bind("mouseup", function (event) {
       $(this).unbind("mousemove mouseup");
    });
 });

您的表格标题应如下所示：

<td>
    <div class="gridTableSeparator"></div>
    <div class="gridTableHeadline">Tableheadline</div>
</td>

并像这样格式化分隔符和标题：

.gridTableSeparator 
{
  width: 3px; 
  right:-4px;
  height:40px;
  float:right;    
  position:relative;  
  cursor: e-resize;  
}
.gridTableHeadline 
{
  line-height: 40px;  
  overflow: hidden;
}

自行操作的好处是您可以完全控制并且可以根据需要更改外观和功能。否则，如果您可以发布小提琴，那就太好了，所以如果您添加超过 30 行，我们可以看到出了什么问题。