javascript - 带有 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;
}

自己动手的好处是您拥有完全的控制权，可以根据需要更改外观和功能。否则，如果你能发布一个 fiddle 就太好了，这样我们就可以看到如果你添加超过 30 行时出了什么问题。