javascript - return highlighted cells to php -
so using example code link select cells on table dragging build grid of numbers 1-192 part works great, curious how return "highlighted" cells php?
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css" media="screen"> table td { width:50px; height:50px; text-align:center; vertical-align:middle; background-color:#ccc; } table td.highlighted { background-color:#999; } </style> </head> <body> <form action='test.php' method='post'> <table cellpadding="0" cellspacing="1" id="our_table"> <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> <table> <tbody> <tr> <input type='submit' name='test' value = 'test' /> </tr> </tbody> </table> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(function () { var ismousedown = false; $("#our_table td") .mousedown(function () { ismousedown = true; $(this).toggleclass("highlighted"); return false; // prevent text selection }) .mouseover(function () { if (ismousedown) { $(this).toggleclass("highlighted"); } }) .bind("selectstart", function () { return false; // prevent text selection in ie }); $(document) .mouseup(function () { ismousedown = false; }); }); </script> </body>
** added in button
this might need slight modification specific case, should pretty close need. i've included comments indicate what's happening.
// bind click handler button $("input[name='test']").on("click", function() { var selectedvalues = []; // iterate through each of highlighted cells $(".highlighted").each(function(){ // push content of current cell array selectedvalues.push($(this).text()); }); // invoke ajax send data server $.ajax({ url: "http://yourdomain.com/somepage.php", method: "get", data: { selectedvalues: selectedvalues }, success: function(){ alert("it worked!"); }, error: function(){ alert("it didn't work :("); } }); });
Comments
Post a Comment