6

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

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

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

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

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

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

4

2 回答 2

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

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

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

于 2013-03-15T15:33:20.263 回答
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 回答