sending html table data into mysql table

Question

I have a dynamic (via jquery) html table like this:

<form action="index.php" method="post">
<table class="myTable" id="cup">
<tbody>
<tr><td class="header" colspan="6">YOUR SELECTIONS</td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr> //selected
</tbody>
</table>
<input type="submit" value="submit">
</form>

First, the table has only 1 row and 6 cells (except "selections" part). After some conditions satisfied, the cells get filled with some values and the "selected" row is appended into the table via jquery. But my problem here, is not related to jquery.

Each of 6 cells will be inserted into the mysql table part by part. My database table structure like this:

ID |  Selection1   |...|  Selection6  |  Date, time stuffs and other info.

So, I need some code that will do these jobs:

define an array with 6 element.
counter=0;
loop(until there is no traveled cell in the html table)
{
    find a cell that is not NULL or its value is not "selections";
      array[counter] <-- value of cell;
      counter++;
      if (counter == 6)
      {
         insert all of them into the mysql table (?)
         counter=0;
      }
}//end loop

So, this is my problem. I just can't know how to do it. Should I have to add "id" or "name" stuffs in the html tags or what? :)

EDIT: I don't want you guys to code it for me of course. The thing I couldn't get is how to separate these values 6 by 6 and send them into the database. I just need ideas.

@JayBlanchard of course not. I just don't know how to seperate all the values 6 by 6 and send them into the database. Lets say there are 6 rows, that means I have to use mysql commands 6 times. — Who Cares, May 20 '14 at 16:44
You could create a loop that goes through each row and then submits the values for that row. — Jay Blanchard, May 20 '14 at 16:47
Did your try to send a JSON string, containing all the data and can be submitted once? — PeterKA, May 20 '14 at 16:48
I think that what @JayBlanchard is how you're going to have to do it. In SQL 2008 and later, you can add multiple rows in one call. http://stackoverflow.com/questions/452859/inserting-multiple-rows-in-a-single-sql-query — Chase Walden, May 20 '14 at 16:51
@JayBlanchard I don't see anywhere in his post that he says he isn't. — Chase Walden, May 20 '14 at 16:54
@JayBlanchard I believe this applies to MySQL as well as SQL. Its the same syntax for either one. — Chase Walden, May 20 '14 at 16:55
Any INSERT statement can place multiple rows in a table. The OP will still have to loop through each row in order to set up the query. — Jay Blanchard, May 20 '14 at 16:58
@JayBlanchard I don't think I was disagreeing with that. I even said: "I think that what JayBlanchard is how you're going to have to do it". I was saying that once he's looped through it, he can put it all into a single query — Chase Walden, May 20 '14 at 17:00
Guys I think I couldn't explain myself. How can I fetch this values from the cells via PHP? This is first.Because I don't know how to do it without using "name" attrs. Because of being dynamic, jquery's append command **I think** wouldn't work. After that, from the array? Or do you think any other idea? And no, I don't have any JSON strings. — Who Cares, May 20 '14 at 17:04
You can construct a JSON string. Give me a data sample (table) and I'll show you how to convert that into JSON. Then you can submit all the data - however many rows - in one ajax call. Then in PHP you can retrieve all the data and decide how to put in in your MySQL table. — PeterKA, May 20 '14 at 21:44

PeterKA · Answer 1 · 2014-05-20T23:16:44.703

From the html table data you can construct a JSON object. For instance:

var myData = [],
    keys = ['ID','Selection1','Selection2', ..... ]
    url = './index.php';
$('table').find('tr:gt(0)').each(function( i, row ) {
   var oRow = {};
   $( row ).find( 'td' ).each( function( j, cell ) {
      oRow[ keys[ j ] ] = $( cell ).text();
   });
   myData.push( oRow );
});
//myData = [ {"ID":"3u3y","Selection1",....},{"ID":"jdjdj",...}.... ]
//now you can use one key to send all the data to your server
$.post( url, { mydata: JSON.stringify( myData ) }, function(d) { 
   alert( 'Server said, ' + d ); 
});
//In your PHP script you would look for the data in mydata --> $_POST['mydata']

EDIT

Click the link below to go to a demo.

In THIS DEMO click submit and then look at the console on the right. Click the plus on the left of the failed ajax call and then click the Post tab to examine the data the call attempted to send.

Does that help?

sending html table data into mysql table

1 Answers1

Linked