javascript - Display which cells are highlighted on submit -
i have few tables on page cells can selected or deselected.
is there way display cells have been selected when user clicks submit button?
here fiddle: https://jsfiddle.net/blueberrymuffin/h18yr46a/9/
and code below.
thank you.
jquery('table').on('click', function (e) { var ourtable = jquery(e.target).closest('table'); var scount = ourtable.find('.highlighted').length; console.log(ourtable, scount, $(e.target).hasclass('highlighted')); if (scount < 4 || $(e.target).hasclass('highlighted')) { $(e.target).toggleclass("highlighted"); } e.preventdefault(); }); jquery('#gridinfo').on('click', function (e) { alert("info"); }); <table cellpadding="0" cellspacing="0" id="our_table1"> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> <td>i</td> </tr> </table> </br> <table cellpadding="0" cellspacing="0" id="our_table2"> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> <td>i</td> </tr> </table> <br/> <input type="submit" id="gridinfo" value="grid info">
there many ways this, here one:
jquery('table').on('click', function (e) { var ourtable = jquery(e.target).closest('table'); var scount = ourtable.find('.highlighted').length; console.log(ourtable, scount, $(e.target).hasclass('highlighted')); if (scount < 4 || $(e.target).hasclass('highlighted')) { $(e.target).toggleclass("highlighted"); } e.preventdefault(); }); jquery('#gridinfo').on('click', function (e) { var selected = new string(); jquery('.highlighted').each(function() { selected += $(this).text(); }); alert("these cells have been selected: " + selected); });
working fiddle
Comments
Post a Comment