How to insert data to a mysql database from an HTML Table

Question

I have a HTML table with information. Right now I can add rows and delete the rows with a button using javascript. I can a

Answer 1

Yes.. You have good JavaScript code to adding dynamic content..wow.. Now you want to insert that content to MySQL table..yes you can... Before that small modification to do your code.. First you should understand insert something to database, you have a HTML form element.. and controls..you can add dynamically HTML form element as following

  function addRow(tableID) { 

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = "<input type='text' name='item[]'>";

        var cell3 = row.insertCell(2);
        cell3.innerHTML = "<input type='text'  name='price[]' />";

        var cell4 = row.insertCell(3);
        cell4.innerHTML =  "<input type='text'  name='qty[]' />";
        }

keep your delete method same, but change this line only

var i=1

to

var i=0

Now Change your HTML code as following , make sure your table body tag has a id named "dataTable", and remove you check box ,put form element to cover your table..bang...

<INPUT type="button" value="Add Row" onClick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onClick="deleteRow('dataTable')" />

<form action="" method="post" name="f">  

<TABLE width="425" border="1">
<thead>
<tr>
<th width="98"></th>
<th width="94">Item</th>
<th width="121">Price</th>
<th width="84">Qty</th>

</tr>
</thead>
<tbody id="dataTable">

</tbody>
</TABLE>

<INPUT type="submit" value="Insert" name="submit" />
</form>

// create mysql database and then create table // following is the example

CREATE TABLE `your_table_name` (
  `id` int(11) NOT NULL auto_increment,
  `item` varchar(200) NOT NULL,
  `price` varchar(200) NOT NULL,
  `qty` varchar(200) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

greate ... now this is the interesting part.. I use the php language to insert data to database.. make sure you should create database connection..

<?php
    if($_POST[submit])
    {
     foreach ($_POST['item'] as $key => $value) 
        {
            $item = $_POST["item"][$key];
            $price = $_POST["price"][$key];
            $qty = $_POST["qty"][$key];

            $sql = mysql_query("insert into your_table_name values ('','$item', '$price', '$qty')");        
        }

    }   
?>

I think this post is important to all ..

Answer 2

First of all you should separate client and server side:

Client is browser, and HTML table is stored in "browser's" memory, all editorial is done on client's computer, you can disconnect from internet and still use this page - and it will work (add/delete rows)

Server's side works on remote server and don't know what rows/columns are inserted into client's HTML table.

So, you need some mechanism to send data from client to server, after you finished.

Second item: HTML table and Relational Database table are different entities, HTML table is only a visual representation of data, relational database table is entity in specific database (you can have several databases, each database can have several tables) stored on disc (on server usually).

HTML table can have dynamic rows/columns, but RD table can have dynamic rows only, NOT columns, (not fairly true, some RDBMS allows removing columns).

Finally - you should solve 2 items:

1. Sending data from client to server, this can be achieved via placing <form action="phpscript.php">...</form> around <table> and adding "submit" button to it, dont forget to store amount of columns/rows in some "hidden" fields, also - I suppose you need data in this cells, so add <input> in each HTML table cell

2. Storing data on server - for mysql you really can go with dynamic columns add/remove, but also you can just store ROW and COLUMN index with data, like:

0, 0, dataincell_0_0
1, 0, dataincell_1_0