1

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>

コードを機能させるためにどの行を変更する必要があるかについて誰かが考えていますか？

4

1 に答える 1

3

自分でやってみませんか？テーブルのサイズを変更可能にするのは非常に簡単です。

まず、これを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行を超えて追加した場合に何がうまくいかなかったかを確認できます。

于 2013-01-04T07:41:36.900 に答える