Question

创建了可调整大小的表格列代码

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

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

1 个答案: