javascript - 在 php 和 html5 中使用 javascript 添加行

Question

参见图片。我想在单击“添加”按钮时重复相同的字段。我是 javascript 和 php 的新手。我尝试使用 javascript 添加行的代码，但它不起作用。谁能帮我写一下代码。

 <form action="act_master.php" method="post">
        <fieldset>
            <legend>Activity</legend>
            <table id="tb1">
                <tr>
                    <td>Name</td>
                    <td><input type="text" name="activityname" required></td>
                </tr>
                <tr>
                    <td>Month</td>
                    <td><select name="month" required>
                        <option></option>
                            <?php
                                $conn=new mysqli("localhost","root","","project");
                                $menu=" "; 
                                $sql="SELECT name FROM month"; //selection query
                                $rs = mysqli_query($conn, $sql);//odbc_exec($conn,$sql);s
                                if(mysqli_num_rows($rs) > 0) {
                                    // output data of each row
                                     while($row = mysqli_fetch_assoc($rs)) {
                                        $menu .= "<option value=".$row['name'].">" . $row['name']. "</option>";
                                        }
                                }
                                echo $menu;
                                mysqli_close($conn); 
                            ?>        
                        </select></td>
                </tr>
                <tr>
                    <td>Date</td>
                    <td><select name="date" required>
                        <option></option>
                        <?php
                             for ($i=1; $i<=31; $i++)
                             {
                        ?>
                            <option value="<?php echo $i;?>"><?php echo $i;?></option>
                        <?php
                            }
                        ?></td>
                </tr>
               </table>
           <input type="submit" value="Add Activity" onclick="addrow(tb1)">


        </fieldset>
        <script>
            function addrow(tb1){
            var table = document.getElementById(tb1);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "text";
            element1.name="activityname";
            cell1.appendChild(element1);
        } 
        </script>
    </form>
    </div>

Answer 1

使用此代码在“添加事件”的 onclick 事件中为“名称”添加一个新行。每次单击“添加事件”时，都会为“名称”创建一个新行。

<form action="act_master.php" method="post">
  <fieldset>
    <legend>
      Activity
    </legend>
    <table id="tb1">
      <tr>
        <td>
          Name
        </td>
        <td>
          <input type="text" name="activityname" required>
        </td>
      </tr>
      <tr>
        <td>
          Month
        </td>
        <td>
          <select name="month" required>
            <option>
            </option>
            <?php
$conn=new mysqli("localhost","root","","project");
$menu=" "; 
$sql="SELECT name FROM month"; //selection query
$rs = mysqli_query($conn, $sql);//odbc_exec($conn,$sql);s
if(mysqli_num_rows($rs) >
0) {
// output data of each row
while($row = mysqli_fetch_assoc($rs)) {
$menu .= "
<option value=".$row['name'].">
" . $row['name']. "
</option>
";
}
}
echo $menu;
mysqli_close($conn); 
?>

                      </select>
                  </td>
              </tr>
              <tr>
                <td>
                  Date
                </td>
                <td>
                  <select name="date" required>
                    <option>
                    </option>
                    <?php
for ($i=1; $i
<=31; $i++)
{
?>
  <option value="
<?php echo $i;?>
">
  <?php echo $i;?>
  </option>
  <?php
}
?>
                      </td>
                  </tr>
          </table>
          <input type="submit" value="Add Activity" onclick="addrow()">


  </fieldset>
  <script>
    function addrow(){

      var table = document.getElementById("tb1");
      var row = table.insertRow(0);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = "Name";
      cell2.innerHTML = "<input type='text' name='activityname' required>";


    }

  </script>
</form>
</div>