如何在单击 PHP 中的按钮时动态插入列表框？答案

【问题标题】：How to insert list box dynamically on click of a button in PHP?如何在单击 PHP 中的按钮时动态插入列表框？
【发布时间】：2018-01-02 23:54:35
【问题描述】：

我想创建一个表格，用于向数据库中插入多行数据。我有一个可以插入数字的字段，然后单击“添加”按钮。没有记录将添加到表中。

我现在可以根据插入的行数添加记录数。但我希望 Floor_id 字段是连续数字，而它只是 copyig 第一个字段。

任何人都可以指导如何将第一个字段作为增量数字。

代码片段

function addRow(tableID,num)
		{	
			 
			var num = $("#rownum").val();
			  $("#dataTable tr").slice(2).remove();
			for (var n = 2; n <= num; n++) 
			{
					var table = document.getElementById(tableID);
					var rowCount = table.rows.length;
					var row = table.insertRow(rowCount);
					var colCount = table.rows[0].cells.length;
					for(var i=0; i<colCount; i++) 
					{
						var newcell	= row.insertCell(i);
						newcell.innerHTML = table.rows[1].cells[i].innerHTML;
						//alert(newcell.childNodes);
						switch(newcell.childNodes[1].type) 
						{
							case "text":
									newcell.childNodes[1].value = "";
									break;
							case "select-one":
									newcell.childNodes[1].selectedIndex = 0;
									break;
						}
					}
			}
		}

<HTML>
<HEAD>
	<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</HEAD>
<BODY>
<div class="results"></div>
		
		<fieldset style="width: 1600px;">
			<legend><b>Building Layout Info</b></legend>
			<TABLE id="dataTable" width="350px" border="1">
			<tr>
				<th>Floor_Id</th>
				<th>Front_F_Mark </th>
				<th>Rear_F_Mark</th>
				<th>Floor_Type</th>
			</tr>
			<TR>
				 <td><input type= "text" name= "Floor_Id[]" value="1"  /> </td>
				 <td><input type= "text" name= "Front_F_Mark[]"  /> </td>
				 <td><input type= "text" name= "Rear_F_Mark[]" /> </td></td>
				 <td><select  name="Floor_Type[]" id="Floor_Type"  > 	<br />
							 <option value="">Floor_Type </option>
							 <option value="Normal">Normal</option> 
							 <option value="Hidden">Hidden</option> </select>  
						</select>
				 </td>
			</TR>
<labe>Number of Records<input class="row" type='text' id='rownum' name='rownum' /> </label>
	<INPUT type="button" value="Add Row" onclick="addRow('dataTable');" />
</TABLE>
</body>

</html>

【问题讨论】：

欢迎来到 SO。请访问 help center 并参观以了解询问内容和方法。提示：邮政编码和努力——
@bub 感谢您提到这一点。更新相同。
@ItamarG3 你能帮忙看看如何添加列表框，因为它在这里只添加文本框。我的列表框正在通过 PDO 获取数据..

标签： php jquery

【解决方案1】：

我能够通过以下更改来实现这一点。

<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 </HEAD>
 <BODY>
  <div class="results"></div>

    <fieldset style="width: 1600px;">
        <legend><b>Building Layout Info</b></legend>
        <TABLE id="dataTable" width="350px" border="1">
        <tr>
            <th>Floor_Id</th>
            <th>Front_F_Mark </th>
            <th>Rear_F_Mark</th>
            <th>Floor_Type</th>
        </tr>
        <TR>
             <td><input type= "text" name= "Floor_Id[]" value="1"  /> </td>
             <td><input type= "text" name= "Front_F_Mark[]"  /> </td>
             <td><input type= "text" name= "Rear_F_Mark[]" /> </td></td>
             <td><select  name="Floor_Type[]" id="Floor_Type"  >    <br />
                         <option value="">Floor_Type </option>
                         <option value="Normal">Normal</option> 
                         <option value="Hidden">Hidden</option> </select>  
                    </select>
             </td>
        </TR>
       <labe>Number of Records<input class="row" type='text' id='rownum' name='rownum' /> </label>
      <button type="button" class='loadfloor' style="float: right;"> Load Floors</button>
      </TABLE>   
     </form>
     <script>   
     $(".loadfloor").on('click',function(){
    var num = $("#rownum").val();
    $("#dataTable tr").slice(2).remove();
    for (var i = 2; i <= num; i++) 
    {
        var data = "<tr><td><input type='text' id='Floor_Id"+i+"' name='Floor_Id[]' value = "+i+" /></td><td><input type='text' id='Front_F_Mark"+i+"' name='Front_F_Mark[]'/></td><td><input type='text' id='Rear_F_Mark"+i+"' name='Rear_F_Mark[]'/></td><td><select id='Floor_Type"+i+"' name='Floor_Type[]'><option value='null'>Floor_Type</option><option value='Normal'>Normal</option><option value='Hidden'>Hidden</option></td></tr>";
        $("#dataTable").append(data);
    }
 }); 
  </script>
 </body>
 </html>

【讨论】：