Question

当我单击“添加框”时，无法发布添加的表。请引导我。

我的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
</head>
<body>

<button id="addbutton">add box</button>
<div id="boxes">
  <div class="active">

<form action="php.php" method="post">
  <table id="myTable">
  <tr>
    <td>Form (YYYY-MM-DD)</td>
    <td>To (YYYY-MM-DD)</td>

  </tr>
  <tr>
    <td><input type="date" name="col1[]" size="20"></td>
    <td><input type="date" name="col1[]" size="20"></td>
    </td>
  </tr>
  </table>
  </div>
</div>
<script>
var addbutton = document.getElementById("addbutton");
addbutton.addEventListener("click", function() {
  var boxes = document.getElementById("boxes");
  var clone = boxes.firstElementChild.cloneNode(true);
  boxes.appendChild(clone);
});
</script>
<input type="submit" name="submit"/>
</body>
</html>

我的php代码：

<html>
<body>
<table id="myTable">
  <tr>
    <td>Form (YYYY-MM-DD)</td>
    <td>To (YYYY-MM-DD)</td>
  </tr>
  <tr>
    <td><?php  echo $_POST['col1'][0];?></td>
    <td><?php echo $_POST['col1'][1]; ?></td>
  </tr>
  </table>
</body>
</html>

我添加按钮以使用javascript克隆表。并在我的表格中使用数组将其发布到可以工作的其他页面，但是当我单击“添加框”时，它无法发布已添加的表格！

Answer 1

当我单击“添加框”时，在错误的位置添加了错误的标签。
因此，您可以像这样解决问题，这将是您期望的结果。

html：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
</head>
<body>

<button id="addbutton">add box</button>
<div id="boxes">
  <div class="active">

<form action="php.php" method="post">
  <table id="myTable">
  <tr>
    <td>Form (YYYY-MM-DD)</td>
    <td>To (YYYY-MM-DD)</td>
  </tr>
  <tr>
    <td><input type="date" name="col1[]" size="20"></td>
    <td><input type="date" name="col2[]" size="20"></td>
  </tr>
  </table>
  <input type="submit" name="submit"/>
</form>
<script>
var addbutton = document.getElementById("addbutton");
addbutton.addEventListener("click", function() {
  var myTable = document.getElementById("myTable");
  var rowhtml = '<tr>';
  rowhtml += '<td><input type="date" name="col1[]" size="20"></td>';
  rowhtml += '<td><input type="date" name="col2[]" size="20"></td>';
  rowhtml += '</tr>';
  myTable.insertAdjacentHTML('beforeend', rowhtml);
});
</script>
</body>

php：

<html>
    <body>
    <table id="myTable">
      <tr>
        <td>Form (YYYY-MM-DD)</td>
        <td>To (YYYY-MM-DD)</td>
      </tr>
      <?php for ($i=0; $i < count($_POST['col1']); $i++) : ?>
      <tr>
        <td><?php echo $_POST['col1'][$i]; ?></td>
        <td><?php echo $_POST['col2'][$i]; ?></td>
      </tr>
      <?php endfor; ?>
    </table>
    </body>
</html>

Answer 2

First of all, you are trying to append a table to a div which is a bad idea. Instead try adding rows to the existing table. 
To access the elements, every element should be uniquely identified. 
i would suggest you to increment the variables by id or name. So that can access every element in php using for loop.

HTML Code

    `<!DOCTYPE html>
    <html lang="en">
    <head>
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <style>
    </style>
    </head>
    <body>

    <button id="addbutton">add box</button>

      <div class="active">

    <form action="/test/php.php" method="post">
      <table id="myTable">

      <tr>
        <td>Form (YYYY-MM-DD)</td>
        <td>To (YYYY-MM-DD)</td>

      </tr>

      <tr>
        <td><input type="date" name="col1[1]" id="col1" size="20"></td>
        <td><input type="date" name="col2[1]" id="col2"></td>
        </td>
      </tr>
      </table>
      </div>

    <script>
    var addbutton = document.getElementById("addbutton");
    var i=1;
    var x=$("form").serialize();
    console.log(x);
    addbutton.addEventListener("click", function() {
      i++;
      var table= document.getElementById("myTable");
      var clone = table.lastElementChild.cloneNode(true);
      document.getElementById("col1").setAttribute("name","col1["+i+"]");
      document.getElementById("col2").setAttribute("name","col2["+i+"]");
      table.appendChild(clone);

    });
    </script>
    <input type="submit" name="submit"/>
    </body>
    </html>`

PHP Code

    <?php  
    $col1=$_POST['col1'];
     $col2=$_POST['col1'];

     foreach($col1 as $val1) {
     echo $val1;
     }
     foreach($col2 as $val2) {
    echo $val2;
     }
    ?>

如何发布添加表？

2 个答案: