将html表输入值添加到mysql数据库表

Question

I've searched far and wide for answers to this question but couldn't find any.

I want to add the content of a html table to a mysql database using php and javascript, where each row is a new record.

Here is a table example:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">ID</th>
    <th scope="col">NAME</th>
    <th scope="col">EMAIL</th>

  </tr>
  <tr id="row">
    <td><input name="ID" type="text" value="20" /></td>
    <td><input name="NAME" type="text" value="Peter" /></td>
    <td><input name="EMAIL" type="text" value="peter@gmail.com" /></td>
  </tr>
  <tr id="row">
    <td><input name="ID" type="text" value="21" /></td>
    <td><input name="NAME" type="text" value="Jhon" /></td>
    <td><input name="EMAIL" type="text" value="jhon@yahoo.com" /></td>
  </tr>
  <tr id="row">
    <td><input name="ID" type="text" value="22" /></td>
    <td><input name="NAME" type="text" value="Mike" /></td>
    <td><input name="EMAIL" type="text" value="mike@hotmail.com" /></td>
  </tr>
</table>

<input name="Btn" type="button" onclick="addRecords()" value="Add"/>
</form>

And the javascript sample of what I tried:

<script>
function addRecords()
{
    var row = document.getElementById("row")


    for (x in row)
    {
        $.post="<? $insertSQL = sprintf("INSERT INTO accounts (acc_id, acc_name, acc_email) VALUES (%s, %s)",
                       GetSQLValueString($_POST['ID'], "integer"),
                       GetSQLValueString($_POST['NAME'], "text"),
                       GetSQLValueString($_POST['EMAIL'], "text"));

  mysql_select_db($database_G3CSAdminControlPanel, $G3CSAdminControlPanel);
  $Result1 = mysql_query($insertSQL, $G3CSAdminControlPanel) or die(mysql_error()); ?>"
    }
}

</script>

What the above does, it only adds the last record in the table to the database. I'm guessing my problem is with the php code and that each input should be put into an array as well and not just the rows, not sure how to do that though.

UPDATE The code I've shown is only a example of what I'm trying to do. The id's for the rows has to stay the same, because I'm using a script which creates the table in my actual web page.

Basically I want to do the following, but in PHP:

<script>
function addRecords()
{
    var row = document.getElementById("row");
    var n = 0;
    var q = 0;
    for (x in "row")
    {
        n++;
        var code = document.getElementsByName("ID")[q].value;
        var desc = document.getElementsByName("NAME")[q].value;
        var price = document.getElementsByName("EMAIL")[q].value;
        alert(code + ' ' + desc + ' ' + price);
        q++;
    }
    alert('There is ' + n + ' rows in the table');
}
</script>

The script returns the values of the inputs in each row. I want to do something similar in PHP, but to add the values from the inputs in each rows as a record in a database table.

So instead of doing a Javascript alert for each row it should execute a PHP script to insert a record of that row.

Answer 1

You'll have to uniquely identify each row (ID0,EMAIL0, etc). This is easily done when building the table either via PHP or script. Then in your PHP form code you do a foreach on $_GET and read each. The way you have it now, each subsequent ID, EMAIL, etc is over writing the previous one.

Answer 2

You have three fields to insert. And there are a number of each. So you need to use input fields' names as html array. Otherwise upon form post, the last field will override prior ones.

Specifically talking, edit your markup as follows:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">ID</th>
    <th scope="col">NAME</th>
    <th scope="col">EMAIL</th>
  </tr>
  <tr id="row1">
    <td><input name="ID[]" type="text" value="22" /></td>
    <td><input name="NAME[]" type="text" value="Mike" /></td>
    <td><input name="EMAIL[]" type="text" value="mike@hotmail.com" /></td>
  </tr>
  <tr id="row2">
    <td><input name="ID[]" type="text" value="22" /></td>
    <td><input name="NAME[]" type="text" value="Mike" /></td>
    <td><input name="EMAIL[]" type="text" value="mike@hotmail.com" /></td>
  </tr>
  <tr id="row3">
    <td><input name="ID[]" type="text" value="22" /></td>
    <td><input name="NAME[]" type="text" value="Mike" /></td>
    <td><input name="EMAIL[]" type="text" value="mike@hotmail.com" /></td>
  </tr>
</table>

Answer 3

Rather than directly accessing your row, first get your table, then the rows.

var table = document.getElementById('myTable');
for (i=1; i < table.rows.length; i++) {
    var row = table.rows(i);
}

Answer 4

If you have multiple elements with the same id, such as:

 <tr id="row"> 

then the function:

document.getElementById("row")

will consider only the last one of them (this depending on the browser).

To be really sure that you will really get all the elements you have to give them different ids. like

<tr id="row1">...
...
<tr id="row2">...
...
<tr id="row3">...
...

Good luck!