Moving only certain CSS styles from one element to another

Question

I created a jQuery plugin that takes an HTML table, makes it sortable, and corrects the header and footer. See http://jsfiddle.net/aXDzz/ for an example (click create to create a table).

It works well, but lately it is required to add some additions or fields around the table. This caused some problems.

My plugin basically replaces the original <table> with <div> , which contains <table> for the header, <div> in which the intern contains <table> for the body, and <table> for the footer, My intention was so that the user applies CSS to the source table, and using my plugin, CSS will be appropriately ported. However, as stated above, I wrap the <div> around the table, so now the marker or indent should be applied to the <div> , not the <table> .

So it seems like I need to move any CSS that applies to the appearance of <table> to <div> , such as margin, but then leave any CSS that applies to the inside of <table> , for example, only the color of the row.

How can I do it? Or am I best to do this? Thanks

PS. Please feel free to criticize my plugin as this is my first attempt.

Answer 1

I tried to change this plugin for your needs:

 (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(/\-([az])/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); 

in such a structure:

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

HTML:

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

you can use this plugin as follows:

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

the result is that the edge of the inner margin and the indentation will be overwritten and the style added to the wrapper-div. you can handle the override behavior with the last boolean indicator.

here is a complete example on jsFiddle . I can not guarantee that it works in all browsers (just tested Firefox and ie9)

Answer 2

I checked your code and I tried applying margin to your table:

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

And then I saw where the problem is. But then I looked at the code and you specified a fixed width

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

And that causes problems.

Take a look at:

 width: 618px; 

If I understand the question correctly, this is not calculated well. Perhaps you could try to find in your plugin where the width is calculated, and then include the margin in the calculation, how to calculate the width. I haven't found it yet. The plugin is long.

When I set, for example, 665px, it looks pretty good.

Perhaps this is a solution.