2017-07-27 84 views
-7

我想創建一個表,用於將多行數據插入到數據庫中。我有一個字段,我可以插入一個數字並單擊「添加」按鈕。沒有記錄將被添加到表中。如何在PHP中點擊按鈕動態插入列表框?

我現在可以根據插入的行數添加記錄數。但是我希望Floor_id字段是連續的數字,而它只是第一個字段。

任何人都可以guilde如何獲得第一場作爲增量數字。

代碼段

function addRow(tableID,num) 
 
\t \t { \t 
 
\t \t \t 
 
\t \t \t var num = $("#rownum").val(); 
 
\t \t \t $("#dataTable tr").slice(2).remove(); 
 
\t \t \t for (var n = 2; n <= num; n++) 
 
\t \t \t { 
 
\t \t \t \t \t var table = document.getElementById(tableID); 
 
\t \t \t \t \t var rowCount = table.rows.length; 
 
\t \t \t \t \t var row = table.insertRow(rowCount); 
 
\t \t \t \t \t var colCount = table.rows[0].cells.length; 
 
\t \t \t \t \t for(var i=0; i<colCount; i++) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t var newcell \t = row.insertCell(i); 
 
\t \t \t \t \t \t newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
 
\t \t \t \t \t \t //alert(newcell.childNodes); 
 
\t \t \t \t \t \t switch(newcell.childNodes[1].type) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t case "text": 
 
\t \t \t \t \t \t \t \t \t newcell.childNodes[1].value = ""; 
 
\t \t \t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t \t case "select-one": 
 
\t \t \t \t \t \t \t \t \t newcell.childNodes[1].selectedIndex = 0; 
 
\t \t \t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t } 
 
\t \t }
<HTML> 
 
<HEAD> 
 
\t <TITLE> Add/Remove dynamic rows in HTML table </TITLE> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

 
</html>

+0

歡迎來到SO。請訪問** [幫助中心](http://stackoverflow.com/tour)**並參觀遊覽以瞭解需要什麼以及如何提問。提示:郵政編碼和努力 - –

+0

@bub感謝提到這一點。更新相同。 – N1209

+0

@ ItamarG3可以幫助您添加列表框,因爲它只在這裏添加文本框。我的列表框正在通過PDO獲取數據.. – N1209

回答

0

我能夠通過以下更改達致這。

<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> 
相關問題