wordpress - changing colspan with jquery -

wordpress - changing colspan with jquery -

i have 3rd party code (wordpress plugin) uses table display shopping cart. header has colspan attribute set 3 keeps things in line. problem looks horrible little screens.

my solution display:none product image media queries(because isn't needed on little screen), destroys alignment of header because colspan needs 2.

what want happen if screen size less 560px wide, alter colspan 3 2.

research has led me jquery first experience it. i've sort of compiled next code research, lack knowledge working.

$(window).resize(function(){ if ($(window).width() < 560){ $('.ec_cartitem_head_name').attr('colspan','2'); } });

any help getting code working appreciated!

thank you!

i think on right track, instead of .attr, seek using .prop. anyways, tried simulate scenario demo coding maintain table.

the table resizable (wrapping div actually), seek reducing width , see how colspan modified 1 , increment width see how colspan changed 1.

class="snippet-code-js lang-js prettyprint-override">$(function() { $('#tablewrapper').resizable(); $('#tablewrapper').resize(function() { if ($(this).width() < 200) { $(this).find('.adjspan').filter(function() { homecoming !$(this).hasclass('adjusted'); }).prop('colspan', 1).addclass('adjusted').parent().append("<td></td>"); } else { $(this).find('.adjspan.adjusted').prop('colspan', 2).removeclass('adjusted').next().remove(); } }); }); class="snippet-code-css lang-css prettyprint-override">#tablewrapper { display: inline-block; width: 200px; } #tablewrapper table { width: 100%; } #tablewrapper table tr td { border: 1px solid #d2d2d2; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/eggplant/jquery-ui.css" /> cut down width set colspan 1, increment set 2. <br/> <div id="tablewrapper" class="ui-widget-content"> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td class="adjspan" colspan="2">2+</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </div>

jquery wordpress html-table