Question

我创建了一个jQuery插件，它接受一个HTML表，使其可以排序，并修复页眉和页脚。有关示例，请参阅http://jsfiddle.net/aXDzz/（单击“创建”以创建表格）。

效果很好，但最近需要在桌子周围添加一些填充或边距。这引起了一些问题。

我的插件基本上用原始<table>替换了<div>，其中包含<table>标题，<div>实习生包含<table>正文，页脚<table>。我的意图是让用户将CSS应用于原始表，并且在使用我的插件时，CSS将适当地传输。但是，如上所述，我在表格周围包裹<div>，以便现在应将边距或填充应用于<div>而不是<table>。

所以，看起来我需要将适用于<table>外部的任何CSS移动到<div>，例如margin，但是留下任何适用于{{{1}内部的CSS 1}}例如仅行颜色。

我该怎么做？或者是否有一个更好的方法我应该实现这个？感谢

PS。请随意批评我的插件，因为这是我的第一次尝试。

Answer 1

我已检查过您的代码，并且我已尝试在您的表格中应用保证金：

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

然后我看到了问题所在。但后来我看了代码，你指的是固定宽度

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

这似乎导致了这个问题。

看看：

width: 618px;

如果我正确理解了这个问题，那就不算好了。也许您可以尝试在插件中找到计算宽度的位置，然后将边距包含在计算宽度的计算中。到目前为止我还没有找到。插件很长..

当我放置时，例如665px，它看起来有点好......

也许这就是解决方案。

Answer 2

我尝试根据您的需要修改this插件：

(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);

结果是内部边距和填充被覆盖，并且样式被添加到wrapper-div。您可以使用最后一个布尔指示符处理覆盖行为。

这是jsFiddle的完整示例。我无法保证它适用于所有浏览器（仅测试Firefox和ie9）

仅将一些CSS样式从一个元素移动到另一个元素

2 个答案: