6

HTMLテーブルを取得して並べ替え可能にし、ヘッダーとフッターを修正するjQueryプラグインを作成しました。例については、 http：//jsfiddle.net/aXDzz/を参照してください（[作成]をクリックしてテーブルを作成します）。

正常に動作しますが、最近、テーブルの周囲にパディングまたはマージンを追加する必要がありました。これはいくつかの問題を引き起こしました。

私のプラグインは基本的に、オリジナル<table>をヘッダー用のa 、本文用のインターン、フッター用の<div>を含むに置き換えます。私の意図は、ユーザーが元のテーブルにCSSを適用することであり、プラグインを使用すると、CSSが適切に転送されます。ただし、前述のように、テーブルをラップして、マージンまたはパディングをではなくに適用するようにします。<table><div><table><table><div><div><table>

したがって、マージンなどの外部に適用されるCSSを移動する必要があるように見えますが、行の色などの内部に適用されるCSSはそのままにして<table>おきます。<div><table>

どうすればいいですか？それとも、これを実装するためのより良い方法はありますか？ありがとう

PS。私のプラグインは私の最初の試みなので、遠慮なく批評してください。

4

2 に答える 2

0

私はあなたのコードを調べました、そして私はあなたのテーブルにマージンを適用しようとしました：

.myTable {
    width:600px;
    matgin-left: 50px;
}

そして、私は問題がどこにあるかを見ました。しかし、私はコードを見て、あなたは固定幅を指定しています

<div style="width: 618px; overflow-y: auto; max-height: 300px;"><table id="myTable" class="myTable">

そしてそれが問題を引き起こしているようです。

を見てみましょう：

width: 618px;

私が質問を正しく理解した場合、これは正しく計算されません。たぶん、プラグインで幅が計算される場所を見つけて、幅の計算方法にマージンを含めることができます。私は今のところ見つけていません。プラグインが長いです。

たとえば665pxとすると、少し見栄えがします。

多分それが解決策です。

于 2013-03-15T13:49:34.703 に答える
0

私はあなたのニーズに合わせてこのプラグインを変更しようとしました：

(function($){
    $.fn.copyStyle = function(jqCopyTo,styleStartsWith,overideStyle){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                for(var m = 0; m < styleStartsWith.length; m++){
                    if(prop.lastIndexOf(styleStartsWith[m], 0) === 0)  {
                        var camel = prop.replace(/\-([a-z])/g, camelize);
                        var val = style.getPropertyValue(prop);
                        returns[camel] = val;
                        overideStyle==true ? $(this).css(prop,0):null;
                    }
                }
            };
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                for(var m = 0; m < styleStartsWith.length; m++){
                    if(prop.lastIndexOf(styleStartsWith[m], 0) === 0) { 
                        returns[prop] = style[prop];
                        overideStyle==true ? $(this).css(prop,0):null;
                    }
                }
            };
        };
        //copy 
        $(jqCopyTo).css(returns);
        return this;
    }

})(jQuery);

このような構造で：

#inner {
  margin:20px;
  padding:20px;
  background-color:#F00;
}
#wrapper {
  background-color:#f80;
}

html：

<div id="wrapper">
    <div id="inner">
        Table Content
    </div>
</div>

このプラグインは次のように使用できます。

$("#inner").copyStyle("#wrapper",["margin","padding"],true);

その結果、inner-divの余白とパディングが上書きされ、スタイルがwrapper-divに追加されます。最後のブール値インジケーターを使用してオーバーライド動作を処理できます。

これがjsFiddleの完全な例です。すべてのブラウザで動作することを保証することはできません（FirefoxとIE9をテストしたばかりです）

于 2013-03-15T15:33:20.263 に答える