ホームページ >ウェブフロントエンド >jsチュートリアル >JGrid Prototype_javascript スキルでドラッグして列幅を変更するスクリプト

JGrid Prototype_javascript スキルでドラッグして列幅を変更するスクリプト

WBOYオリジナル: 2016-05-16 19:02:461220ブラウズ

ちなみに私も勉強した列の非表示・表示方法を実装しました。ただし、この関数は css border-collapse:collapse; と競合します。詳細については、コード 2

を参照してください。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jgrid をドラッグしてテーブルの幅を変更します</title>
<style type="text/css"> 
 
</style>

<div>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;"> 
    <colgroup> 
        <col style="width:200px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
    </colgroup> 
    <tr> 
        <td>拖动我1</td> 
        <td>拖动我2</td> 
        <td>拖动我3</td> 
        <td>拖动我4</td> 
        <td>拖动我5</td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
</table>
</div>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

変更バージョン 2

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
</title>jgrid をドラッグしてテーブル幅を変更_修正バージョン<style type="text/css"> 
 
</style>

<div>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;"> 
    <colgroup> 
        <col style="width:200px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
        <col style="width:100px;"> 
    </colgroup> 
    <tr> 
        <td>拖动我1</td> 
        <td>拖动我2</td> 
        <td>拖动我3</td> 
        <td>拖动我4</td> 
        <td>拖动我5</td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
    </tr> 
</table>
</div>

[Ctrl A すべて選択注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

ドラッグダウン大きな影はどのようにして生じたのでしょうか?
意図的に表示されました。 -moz-opacity:0.1;opacity: 0.1 を変更します。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：画像をクリックすると、前のページから次のページに移動します。画像の特殊効果。次の記事：画像をクリックすると、前のページから次のページに移動します。画像の特殊効果。

関連記事

続きを見る