在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>