如何从html表中动态添加的行中检索数据以及如何将它们插入到数据库中

时间:2016-11-02 06:22:35

标签: php mysql

<?php
session_start();
?>
//html code here
    <!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">
    <script language="javascript" type="text/javascript">
    var i=1;
    function addRow()//function that add the row
    {
          var tbl = document.getElementById('table1');
          var lastRow = tbl.rows.length;
          var iteration = lastRow - 1;
          var row = tbl.insertRow(lastRow);

      var firstCell = row.insertCell(0);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'name_' + i;
      el.id = 'name_' + i;
      el.size = 20;
      el.maxlength = 20;
      firstCell.appendChild(el);

      var secondCell = row.insertCell(1);
      var el2 = document.createElement('input');
      el2.type = 'text';
      el2.name = 'address_' + i;
      el2.id = 'address_' + i;
      el2.size = 20;
      el2.maxlength = 20;
      secondCell.appendChild(el2);

      var thirdCell = row.insertCell(2);
      var el3 = document.createElement('input');
      el3.type = 'text';
      el3.name = 'contactNum_' + i;
      el3.id = 'contactNum_' + i;
      el3.size = 20;
      el3.maxlength = 20;
      thirdCell.appendChild(el3);
     // alert(i);

      frm.h.value=i;
      i++;
    //  alert(i);
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title></head>

<body>
<form action="submit.php" method="POST" name="frm" id="frm" enctype="multiform/form-data">
<table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1">
  <tr>
    <td><strong>Name</strong></td>
    <td><strong>Address</strong> </td>
    <td><strong>Contact Num</strong> </td>
  </tr>
 <tr>
    <td><input name="name_0" type="text" id="name_0" size="20" maxlength="20" /></td>
    <td><input name="address_0" type="text" id="address_0" size="20" maxlength="20" /></td>
    <td><input name="contactNum_0" type="text" id="contactNum_0" size="20" maxlength="12" /></td>
</tr>
</table>
<input type="button" value="Add" onclick="addRow();" />
<input name="Submit" type="submit" value="Submit" />
<label>
<input name="h" type="hidden" id="h" value="0" />
</label>
</form>

</body>
</html>
and 
here is my submit.php
<?php
$con=mysqli_connect("localhost", "root", '');
mysqli_select_db($con,"test");

if(isset($_POST['submit']))

{
$num =$_POST['h'];

for($i=0;$i<$num;$i++)

{

        $name       = $_POST["name_$i"];
        $address    = $_POST["address_$i"];
        $contactNum = $_POST["contactNum_$i"];

mysqli_query($con,"INSERT INTO `com`(`name`, `add`, contact) Values('$name', '$address', '$contactNum')");

}

echo "<h1>Done!</h1>";
}
else
{
    echo "not inserted";
}
?>

1 个答案:

答案 0 :(得分:0)

INSERT 效果很好,我可以更改代码中的内容

  

1.if(isset($ _ POST [&#39; submit&#39;]))//提交(大写S)

     

2. $ i&lt; = $ num //更改为&lt; =

PHP代码始终是您网页的第一个区块。

<?php
        session_start();

        if(isset($_POST['Submit']))
        {
            $num =$_POST['h'];

            for($i=0;$i<=$num;$i++)
            {
                $name       = $_POST["name_$i"];
                $address    = $_POST["address_$i"];
                $contactNum = $_POST["contactNum_$i"];

                mysqli_query($con,"INSERT INTO `com`(`name`, `add`, contact) Values('$name', '$address', '$contactNum')");
            }
        }
        ?>
            <!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">
            <script language="javascript" type="text/javascript">
            var i=1;
            function addRow()//function that add the row
            {
                  var tbl = document.getElementById('table1');
                  var lastRow = tbl.rows.length;
                  var iteration = lastRow - 1;
                  var row = tbl.insertRow(lastRow);

              var firstCell = row.insertCell(0);
              var el = document.createElement('input');
              el.type = 'text';
              el.name = 'name_' + i;
              el.id = 'name_' + i;
              el.size = 20;
              el.maxlength = 20;
              firstCell.appendChild(el);

              var secondCell = row.insertCell(1);
              var el2 = document.createElement('input');
              el2.type = 'text';
              el2.name = 'address_' + i;
              el2.id = 'address_' + i;
              el2.size = 20;
              el2.maxlength = 20;
              secondCell.appendChild(el2);

              var thirdCell = row.insertCell(2);
              var el3 = document.createElement('input');
              el3.type = 'text';
              el3.name = 'contactNum_' + i;
              el3.id = 'contactNum_' + i;
              el3.size = 20;
              el3.maxlength = 20;
              thirdCell.appendChild(el3);
             // alert(i);

              frm.h.value=i;
              i++;
            //  alert(i);
        }
        </script>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title></head>

        <body>
        <form action="" method="POST" name="frm" id="frm" enctype="multiform/form-data">
        <table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1">
          <tr>
            <td><strong>Name</strong></td>
            <td><strong>Address</strong> </td>
            <td><strong>Contact Num</strong> </td>
          </tr>
         <tr>
            <td><input name="name_0" type="text" id="name_0" size="20" maxlength="20" /></td>
            <td><input name="address_0" type="text" id="address_0" size="20" maxlength="20" /></td>
            <td><input name="contactNum_0" type="text" id="contactNum_0" size="20" maxlength="12" /></td>
        </tr>
        </table>
        <input type="button" value="Add" onclick="addRow();" />
        <input name="Submit" type="submit" value="Submit" />
        <label>
        <input name="h" type="hidden" id="h" value="0" />
        </label>
        </form>

        </body>
        </html>
        <!--and 
        here is my submit.php-->