javascript - Making a table dynamic -

javascript - Making a table dynamic -

made table product listings page has row of 3 images, row of text below each image, repeat. rather have page scroll downwards indefinitely, figure improve utilize js/jquery alter values in each < td > (img & matching text) create new page every 6 products. however, kindergarten-level js failing me miserably.

while think question i'm asking above pretty obvious, i'm wondering if never should have been set table in first place. seemed easiest way maintain organized, few examples i've seen seem < div >'s rather tables.

here's jsfiddle messing around with: http://jsfiddle.net/jshweky/fgvy2/

html:

<table id="saladgrid"> <tr class="saladpics"> <td class="s1"></td> <td class="s2"></td> <td class="s3"></td> </tr> <tr class="saladtxt"> <td class="txt"> <p>acorn squash, golden beets, pistachios</p> </td> <td class="txt"> <p>roasted eggplant, herbed ricotta, sumac</p> </td> <td class="txt"> <p>arugula, fennel, blackberries, quinoa, pickled shallots</p> </td> </tr> <tr class="saladpics"> <td class="s4"></td> <td class="s5"></td> <td class="s6"></td> </tr> <tr class="saladtext"> <td class="text"> <p>arugula, orange, golden beets, golden tomatoes, pistachios</p> </td> <td class="text"> <p>caesar</p> </td> <td class="text"> <p>butternut squash, lime, feta, chili</p> </td> </tr> </table> <button id="prev">prev</button> <button id="next">next</button>

css (paraphrased):

table { width: 100%; height: 100%; margin-top: 0; padding: 0; border: 0; border-spacing: 0; } td { margin: 0; padding: 0; border: 0; text-align: center; vertical-align: middle; } #saladgrid table { margin: 0 auto; border-spacing: 30px; } .saladpics td { height: 350px; width: 350px; background-position: center; background-size: 415px 400px; background-repeat: no-repeat; border-radius: 250px; border: 1px black solid; } .saladtext { position: relative; margin-bottom: -20px; } .saladpics td.s1 { background-image: url("http://i1281.photobucket.com/albums/a514/jshweky/gourmade%20to%20order/img_1989_zps38d802a7.jpg"); }

i figure it's matter of creating new var's , writing function add together 6 existing img class (e.g. s1 becomes s7, etc.) that's guess , said, if that's right i'm still in embryonic stages of js coding.

your javascript swap image works fine, issue first part of script. commented out in fiddle , worked fine. there improve ways (sliding divs within container, build elements in javascript , append them frames on page - give pinterest style effect of loading new elements @ bottom) - depends on how want handle suggestion using jquery add together or remove elements dom.

//var s7= new image(); //img.src=url('https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcrhc9vk1u5yc5rwmhuk9ai2rgidcsh-wxpt-aleqm9onxi9xbn9da'); $(document).ready(function () { $('#prev').click(function () { $('.s1').css('background-image', 'url("http://i1281.photobucket.com/albums/a514/jshweky/gourmade%20to%20order/img_1483_zpsc4ca87cf.jpg")'); }); });

also, here alternate syntax .css() allow alter more 1 property of elements @ time (you need utilize .html() function alter text in next element too):

$('.s1').css({backgroundimage : 'url("http://i1281.photobucket.com/albums/a514/jshweky/gourmade%20to%20order/img_1483_zpsc4ca87cf.jpg")', backgroundsize : "cover"}); });

javascript jquery html css