JavaScript テーブルの行の配置効果_javascript スキル

前回テーブルソートを行ったので、今回はテーブルについて少し理解できましたが、テーブルがとても複雑であることがわかりました。
この効果が何と呼ばれるかはまだわかりません。最初は列の位置決めをしたいと思っていましたが、まだその必要はありません。時間があるときに行います。
プログラム原理
最初の要件は、スクロール時に時計のヘッド部分を常にヘッドに固定できることです。達成するための重要なことは、tr を配置できるようにすることです。
最初に思い浮かぶのは、tr に相対値を設定し、ie6/7 で次のコードをテストすることです:

<table cellpadding="5" cellspacing="0" border="1" width="100"> <tr style="position:relative; left:100px;"> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]

tr を基準に設定する テーブルを基準に位置決めできるというのは非常に簡単そうに見えますが、この方法はie8でもffでも無効であり、問​​題が多いためすぐに廃止されました。
ps: このエフェクトは、tr をドラッグするのに非常に便利です。
次に私が考えたのは、新しい tr をテーブルに挿入し、元の tr を複製し、この tr を固定 (ie6 は絶対) に設定することでした。たとえば、次のようにします。
コード

<table cellpadding="5" cellspacing="0" border="1" width="100"> <tr style="position:fixed; left:100px;"> <td>1</td> <td>2</td> </tr> <tr style="position:absolute; left:200px;"> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

最初の問題が修正されました。IE7 では tr を配置できず、配置後の td はテーブル内のレイアウトを維持できないため、元のテーブルに tr を挿入するのは意味がありません。
ps: 修正の関連アプリケーションについては、模倣ライトボックス効果 を参照してください。

私が使用した最後の方法は、新しいテーブルを作成し、その新しいテーブルにソース tr のクローンを作成し、効果を達成するために新しいテーブルを配置することでした。
この方法を使用するには 2 つの重要な点があります。まず、可能な限り高度なシミュレーションで TR を作成する必要があります。もう 1 つは、TR を正確に配置する必要があります。これらについては、次のプログラム手順を参照してください。

手順の説明

【クローンテーブル】

要素のクローンを作成するには、cloneNode を使用します。これには、クローンに子ノードが含まれるかどうかを示す bool パラメーターがあります。
プログラムの最初のステップは、元のテーブルのクローンを作成することです:

これ ._oTable = $(table);//ソース テーブル
this._nTable = this._oTable.cloneNode(false);//新しいテーブル
この._nTable.id = "";//ID の競合を避ける

ie の cloneNode パラメータはオプション (デフォルトは false) ですが、ff では必須であることに注意してください。使用する場合はパラメータを記述することをお勧めします。
また、id 属性も複製されることにも注意してください。つまり、複製後に同じ ID を持つ 2 つの要素が存在することになり (clone オブジェクトが設定されている場合)、プログラムによって他の問題が発生しやすくなります。 table id 属性は空のままにします。
追記: クラスを使用してスタイルをテーブルにバインドしてください。ID を使用すると、新しいテーブルはスタイルを取得できません。

クローンを作成してからスタイルを設定します:

これ ._style.width = これ._oTable.offsetWidth "px";
この._style.position = isIE6 ? "絶対" : "修正されました";
これ._style.zIndex = 100;

一般に、offsetWidth は幅パディングボーダーの結果ですが、table は特殊です:

<table width="100" id="t2" style="border:10px solid #000;"> <tr> <td>1</td> <td>1</td> </tr> </table> <script> alert(document.getElementById("t").offsetWidth); alert(document.getElementById("t2").offsetWidth); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

只要给table设置width（style或本身的width属性），不管设置padding和border是多少，offsetWidth都等于width的值。
经测量offsetWidth是没错的，那就是说是table的width设置的问题。
w3c的table部分中说width属性是the desired width of the entire table，我估计entire就是包含了padding和border，找不到什么其他说明，先这么理解吧。
定位方面，除了不支持fixed的ie6用absolute，其他都使用fixed定位。

【克隆tr】

table有一个rows集合，包括了table的所有tr（包括thead和tfoot里面的）。
程序的Clone方法会根据其参数克隆对应索引的tr：

this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this._index : index));
this._oRow = this._oTable.rows[this._index];
var oT = this._oRow, nT = oT.cloneNode(true);

由于tr可能是包含在thead这些中，所以还要判断一下：

if(oT.parentNode != this._oTable){
    nT = oT.parentNode.cloneNode(false).appendChild(nT).parentNode;
}

然后再插入到新table中：

if(this._nTable.firstChild){
    this._nTable.replaceChild(nT, this._nTable.firstChild);
}else{
    this._nTable.appendChild(nT);
}

プログラムではクローンされた tr の変更が許可されているため、挿入されているかどうかを判断し、そうでない場合は直接 appendChild を実行し、そうでない場合は元の tr を replaceChild で置き換えます。

[テーブルの境界線とフレームの属性]

テーブルのborder属性は枠幅の指定に使用され、テーブル固有のframe属性はテーブルの周囲の枠線の表示方法の設定または取得に使用されます。
w3c ラベル のフレーム部分は、フレームが次の値を持つことができることを示します。
void: これはデフォルト値です。 : 上側のみ。
下: 下側のみ。
vsides: 左側のみ。
rhs: 右側のみ。
box: 4 つの辺すべて。
これらの値は、表示する境界線を指定します。なお、デフォルト値は void ですが、設定しない場合は実際には null 値となり、4 つの枠線がすべて表示されます。
また、フレームはスタイルによって設定された境界線には影響しません。次のコードをテストします:

<table width="100" border="5" frame="lhs"> <tr> <td>1</td> <td>1</td> </tr> </table> <table width="100" style="border:5px solid #000;" border="10" frame="lhs"> <tr> <td>1</td> <td>1</td> </tr> </table> [Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります ]ここテーブルの境界線とスタイルの境界線を同時に設定すると、テーブルの境界線が無効になるかどうかも確認できます。 テーブルをより美しくするために、プログラムはフレームやスタイルを含む新しいテーブルの上下の境界線を自動的に削除します。

コード




コードをコピー

コードは次のとおりです: if(this._oTable.border > 0){ switch (this._oTable.frame ) {

case "above" :

case "below" :
case "hsides" :
this._nTable.frame = "void" : case "border" :
case "box" :
this._nTable.frame = "vsides";
}
}
this._style.borderTopWidth = this._style. borderBottomWidth = 0;



ie6/ie7 でテストした場合、null 値はさらに問題になります: