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

Question

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

6

我创建了一个jQuery插件，可以使HTML表格可排序，并固定表头和页脚。查看http://jsfiddle.net/aXDzz/以获取示例（单击“create”创建表格）。

它运行良好，但最近需要在表格周围添加一些内边距或外边距，这导致了一些问题。

我的插件基本上用一个包含表头的<table>，一个包含正文的<div>，和一个包含页脚的<table>来替换原始的<table>。我想让用户对原始表格应用CSS，在使用我的插件时，CSS将自动转移。然而，如上所述，我在表格周围包装了一个<div>，因此现在内边距或外边距应该应用于<div>而不是<table>。

因此，看起来我需要将应用于<table>外部的任何CSS（例如margin）移到<div>中，但是仍然保留应用于<table>内部的任何CSS，例如行颜色。

我该怎么做呢？或者有没有更好的实现方式？谢谢

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

- user1032531

1

@Blazemonger：问题中根本没有提到“使用表格进行布局”，而提供的JSFiddle示例并未使用表格进行布局。它将表格用作表格-这没有任何问题。 - James Donnelly

2

@user1032531 请参考XY问题。 - Ikke

为什么不直接使用http://www.datatables.net/？ - John

也许这个SO问题可以帮助。 - Jan Hommes

@John。原来datatables.net会在<table>周围包装一个<div>并定位<div>。虽然不是最理想的方法，但可能是最好的方法。 - user1032531

显示剩余10条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aleks · 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;

如果我理解问题正确的话，这个计算方法不太好。也许你可以尝试在插件中找到计算宽度的地方，然后将边距包含在内来计算宽度。到目前为止我还没有找到。这个插件很长...

例如，当我设置为665像素时，看起来还不错。

也许这就是解决办法。

- Jan Hommes · 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);

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

这里有一个完整的例子jsFiddle。我不能保证它在所有浏览器中都能正常工作（只测试了Firefox和ie9）