33

古い従来の ASP ページが多数あり、その多くはテーブルにデータベース データを表示しています。どのページにもソート機能が組み込まれていません。元の開発者が使用するのに適していると判断した ORDER BY 句に翻弄されます。

クライアント側の JavaScript を介して並べ替えを行うための簡単な修正に取り組んでいます。ほとんどの場合、必要なことを実行するスクリプトが既に作成されています。ただし、まだ機能を 1 つ追加する必要があります。これらのページの表の行は、行の色が交互に変わることが多く、これを実現するために使用されるメカニズムはページによって異なります。CSS クラスを変更するだけの簡単な場合もあれば、ASP コードによってスタイルがインラインでレンダリングされた場合もあります。

現在、テーブルを並べ替えた後、各行はレンダリングされた配色を保持しているため、交互の行は交互ではなくなりました。私は次のような簡単なものでそれを修正したいと思っていました:

/* "table" is a var for the table element I'm sorting.
   I've already verified it exists, and that there are at least three rows.
   At this point the first row (index 0) is always the header row.
 */

// check for alternating row styles:
var RowStyle = table.rows[1].style;
var AltStyle = table.rows[2].style;

// SORT HAPPENS HERE!!
//  snip  

// Apply alternating row styles
if (RowStyle === AltStyle) return true; 
for (var i=1,il=table.rows.length;i<il;i+=1)
{
    if (i%2==0) table.rows[i].style=RowStyle;
    else table.rows[i].style=AltStyle;                 
}

残念ながら、このように要素のスタイル プロパティを設定することはできません。オブジェクトにセッターがないことを訴えます。他にどうすればこれを簡単に行うことができますか? ここではjQueryのようなフレームワークは許可されていません-それは私の手に負えません。

更新:
最善の解決策ですが、インライン スタイルではなくすべてのクラスを使用するように 100 以上のページをリファクタリングするのは現実的ではありません。また、背景色以外にも関係がある場合があります。たとえば、行が交互の行よりもはるかに暗い場合や明るい場合があり、対応するために 1 つのスタイルの前景色も異なります。または、交互のスタイルでは、境界線が異なる方法で設定される場合があります。これらのすべてのページで何が使用されているのか本当にわからないので、ある行から別の行にすべてのスタイルを一般的に適用するものが必要です。

4

7 に答える 7

41

とをつかんでみてcssTextくださいclassName。

var css1 = table.rows[1].style.cssText;
var css2 = table.rows[2].style.cssText;
var class1 = table.rows[1].className;
var class2 = table.rows[2].className;

// sort

// loop
    if (i%2==0) {
        table.rows[i].style.cssText = css1;
        table.rows[i].className = class1;
    } else {
        table.rows[i].style.cssText = css2;
        table.rows[i].className = class2;
    }

ただし、ブラウザとの互換性については完全にはわかりませんcssText。

于 2008-12-05T15:38:31.590 に答える
23

任意の要素のスタイル属性を設定できます...トリックは、IEでは別の方法で行う必要があることです。(バグ 245 )

//Standards base browsers
elem.setAttribute('style', styleString);

//Non Standards based IE browser
elem.style.setAttribute('cssText', styleString);

IE8 の標準モードでは、最初の方法が機能することに注意してください。

于 2008-12-05T16:36:01.413 に答える
4

私にとって、これはうまくいきます：

function transferAllStyles(elemFrom, elemTo)
{
  var prop;
  for (prop in elemFrom.style)
    if (typeof prop == "string")
      try { elemTo.style[prop] = elemFrom.style[prop]; }
      catch (ex) { /* don't care */ }
}
于 2008-12-05T16:08:33.870 に答える
2

通常は、ノードのスタイルではなくクラスを変更して、CSSにその意味を処理させる方が望ましいことに注意してください。

于 2008-12-05T15:36:47.507 に答える
2

DOM要素のスタイル「プロパティ」は、要素で定義されているすべてのスタイル属性の読み取り専用コレクションです。（コレクションプロパティは読み取り専用であり、必ずしもコレクション内のアイテムである必要はありません。）

要素にclassName"property"を使用することをお勧めします。

于 2008-12-05T15:37:00.220 に答える
0

スタイルオブジェクト自体を設定するのではなく、要素のプロパティであるスタイルオブジェクトの背景色プロパティを設定します。

はい、いいえと言っても、ゼブラストライププラグインを備えたjqueryとtablesorterは、3行のコードでこれをすべて実行できます。

そして、クラス属性を設定するだけで、より整理されたスタイルをハードコーディングせずに制御できるようになります。

于 2008-12-05T15:32:30.493 に答える
0

行の色を変更したいだけの場合は、style.backgroundColorプロパティにアクセスして設定するだけです。

これは、CSSプロパティからJSへの変換へのクイックリンクです。

于 2008-12-05T15:33:37.480 に答える