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

Question

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

但是当我创建超过 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 行，我们可以看到出了什么问题。