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

Question

我创建了一个 jQuery 插件，它采用 HTML 表格，使其可排序，并修复页眉和页脚。示例见http://jsfiddle.net/aXDzz/（点击create创建表）。

效果很好，但最近需要在表格周围添加一些填充或边距。这导致了一些问题。

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

所以，看起来我需要将任何适用于 <table> 外部的 CSS 移动到 <div> （例如边距），然后留下任何适用于 <table> 内部的 CSS，例如单独的行颜色。

我该怎么做？还是有更好的方法我应该实施这个？谢谢

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

Answer 1

我尝试根据您的需要修改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); 

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

这是jsFiddle 上的完整示例。我不能保证它适用于所有浏览器（刚刚测试过 Firefox 和 ie9）

Answer 2

我检查了您的代码，并尝试将边距应用于您的表格：

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

然后我看到了问题所在。但是后来我查看了代码，并且您指定了固定宽度

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

这似乎导致了问题。

看看：

width: 618px;

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

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

也许这就是解决方案。