在按钮单击上动态添加组合框(dynamically adding combo box on a button click)

在按钮单击上动态添加组合框(dynamically adding combo box on a button click)

嗨我正在尝试生成一个按钮单击的表行但我的问题是与combox它从mysql数据库加载数据可以任何人帮助我怎么可以使用javascript与mysql这里是我的JavaScript代码

<script language="javascript" type="text/javascript"> var i=1; function addalRow() { var tbl = document.getElementById('alimtable'); var lastRow = tbl.rows.length; var iteration = lastRow - 1; var row = tbl.insertRow(lastRow); var firstCell = row.insertCell(0); var el = document.createElement('input'); el.type = 'text'; el.name = 'alimname_' + i; el.id = 'alimname_' + i; el.size = 40; el.maxlength = 40; firstCell.appendChild(el); var secondCell = row.insertCell(1); var el2 = document.createElement('input'); el2.type = 'text'; el2.name = 'alimmob_' + i; el2.id = 'alimmob_' + i; el2.size = 13; el2.maxlength = 13; secondCell.appendChild(el2); var thirdCell = row.insertCell(2); var e13 = document.getElementsByName('qabil')[0]; e13.setAttribute('name',e13.getAttribute('name')+'_'+ i);//change the select's name thirdCell.appendChild(e13); // alert(i); i++; makhtab.r.value=i; // alert(i); } </script>

这是我的表格代码

<table border="1px" id="alimtable" size="100px" cellspacing="0" cellpadding="2"> <tr> <td><strong>Muallim Name</strong></td> <td><strong>Mobile</strong> </td> <td><strong>Qabiliyat</strong> </td> </tr> <tr> <td><input name="alimame_0" type="text" id="zimname_0" size="40" maxlength="20" /></td> <td><input name="alimmob_0" type="text" id="zimmob_0" size="13" maxlength="20" /></td> <td><select id="qabil" name="qabil" class="element text large" style="font-size:14px;"/> <option value=""></option> <?php $result = mysql_query("SELECT code, `name` from qabiliyat ") or die(mysql_error()); while ($qab = mysql_fetch_array($result)) { echo "<option value='$qab[code]'>$qab[name]</option>"; } ?> </select></td> </tr> </table> <input type="button" value="Add" onclick="addalRow();" /><input name="h" type="hidden" id="r" value="1" />

hi i am trying to generate a table row on a button click butmy problem is with combox it loads data from mysql database can anyone help on how could i use javascript with mysql here is my javascript code

<script language="javascript" type="text/javascript"> var i=1; function addalRow() { var tbl = document.getElementById('alimtable'); var lastRow = tbl.rows.length; var iteration = lastRow - 1; var row = tbl.insertRow(lastRow); var firstCell = row.insertCell(0); var el = document.createElement('input'); el.type = 'text'; el.name = 'alimname_' + i; el.id = 'alimname_' + i; el.size = 40; el.maxlength = 40; firstCell.appendChild(el); var secondCell = row.insertCell(1); var el2 = document.createElement('input'); el2.type = 'text'; el2.name = 'alimmob_' + i; el2.id = 'alimmob_' + i; el2.size = 13; el2.maxlength = 13; secondCell.appendChild(el2); var thirdCell = row.insertCell(2); var e13 = document.getElementsByName('qabil')[0]; e13.setAttribute('name',e13.getAttribute('name')+'_'+ i);//change the select's name thirdCell.appendChild(e13); // alert(i); i++; makhtab.r.value=i; // alert(i); } </script>

here is my table code

<table border="1px" id="alimtable" size="100px" cellspacing="0" cellpadding="2"> <tr> <td><strong>Muallim Name</strong></td> <td><strong>Mobile</strong> </td> <td><strong>Qabiliyat</strong> </td> </tr> <tr> <td><input name="alimame_0" type="text" id="zimname_0" size="40" maxlength="20" /></td> <td><input name="alimmob_0" type="text" id="zimmob_0" size="13" maxlength="20" /></td> <td><select id="qabil" name="qabil" class="element text large" style="font-size:14px;"/> <option value=""></option> <?php $result = mysql_query("SELECT code, `name` from qabiliyat ") or die(mysql_error()); while ($qab = mysql_fetch_array($result)) { echo "<option value='$qab[code]'>$qab[name]</option>"; } ?> </select></td> </tr> </table> <input type="button" value="Add" onclick="addalRow();" /><input name="h" type="hidden" id="r" value="1" />

最满意答案

$("#addBox").click(function () { var newDD = $("<select/>"); $(newDD).append("<option>Option 1</option>"); $(newDD).append("<option>Option 2</option>"); $("#myBox").append(newDD); }); <div id="myBox"></div> <input type="button" id="addBox" value="Add" /> $("#addBox").click(function () { var newDD = $("<select/>"); $(newDD).append("<option>Option 1</option>"); $(newDD).append("<option>Option 2</option>"); $("#myBox").append(newDD); }); <div id="myBox"></div> <input type="button" id="addBox" value="Add" />