如何使用JavaScript在动态表中动态添加下拉选择

Question

how to i add dynamically drop down select in dynamically table using javascript but i want to use this select in the cell6.innerHTML= instead of input type="text" ?

<script type="text/javascript">
var i = 0;
function changeIt(){
i++;
var table=document.getElementById("itemdetail");
var row=table.insertRow();
var cell4=row.insertCell();
var cell3=row.insertCell();
var cell1=row.insertCell();
var cell7=row.insertCell();
var cell5=row.insertCell();
var cell6=row.insertCell();

cell6.innerHTML="<input style='width:104px' 
type='text' readonly='readonly' name='itemcode[]' id='itemcode"+i+"' />";

cell5.innerHTML="<input  type='text' 
name='particulars[]' id='particulars"+i+"'/>";

cell7.innerHTML="<textarea class='textarea5' 
name='description[]' id='description"+i+"'></textarea>";

cell1.innerHTML="<input style='width:69px' 
type='text' name='qty[]' id='qty_"+i+"' onfocus='return B("+i+");' />";

cell3.innerHTML="<input style='width:50px'
type='text' name='rates[]' id='rates_"+i+"'/>";

cell4.innerHTML="<input style='width:80px' type='text'
readonly='readonly' name='amt[]'  id='amt_"+i+"'
onfocus='return B("+i+");' onMouseOver='return B("+i+");' />";
}
</script>    

i want to use this select in the cell6.innerHTML= instead of input type="text" ?

<select class="select10" name="itemcode[]" id="itemcode" 
style="width:150px;"  onChange="getComboB(this)">
<option value="0"><--Select--> </option>
<?php 
$query=mysql_query("SELECT * from products order by id");
while($row=mysql_fetch_assoc($query))
{
$val2=$row['itemcode'];
?>
<option  value="<?=$val2;?>" <? if ($_GET['itemcode']  == $val2) 
{ echo "selected='selected'"; }?>>
<?=$row['itemcode'];?>
</option>
<?php }?>
</select>

Now i added this code instead of input type text on cell6.innerHTML= but problem is that new table row is not displaying?

cell6.innerHTML= '
<select class="select10" name="itemcode[]" id="itemcode" 
style="width:150px;"  onChange="getComboB(this)">
<option value="0"><--Select--> </option>
<?php 
$query=mysql_query("SELECT * from products order by id");
while($row=mysql_fetch_assoc($query))
{
$val2=$row["itemcode"];
?>
<option  value="<?=$val2;?>" <? if ($_GET['itemcode']  == $val2) 
{ echo "selected=\"selected\""; }?>>
<?=$row["itemcode"];?>
</option>
<?php }?>
</select>';

Answer 1

You try with Jquery.

If cell6 is a id,

document.getElementById("cell").innerHTML+=" your code"

Exactly this:

document.getElementById("cell").innerHTML+="<select class="select10" name="itemcode[]" id="itemcode" 
style="width:150px;"  onChange="getComboB(this)">
<option value="0"><--Select--> </option>
<?php 
$query=mysql_query("SELECT * from products order by id");
while($row=mysql_fetch_assoc($query))
{
$val2=$row["itemcode"];
?>
<option  value="<?=$val2;?>" <? if ($_GET["itemcode"]  == $val2) 
{ echo "selected=\"selected\""; }?>>
<?=$row["itemcode"];?>
</option>
<?php }?>
</select>';"

Answer 2

Try this:

cell6.innerHTML= '
<select class="select10" name="itemcode[]" id="itemcode" 
style="width:150px;"  onChange="getComboB(this)">
<option value="0"><--Select--> </option>
<?php 
$query=mysql_query("SELECT * from products order by id");
while($row=mysql_fetch_assoc($query))
{
$val2=$row["itemcode"];
?>
<option  value="<?=$val2;?>" <? if ($_GET["itemcode"]  == $val2) 
{ echo "selected=\"selected\""; }?>>
<?=$row["itemcode"];?>
</option>
<?php }?>
</select>';

But it is not good idea to get data directly into the view (If you are using MVC programming). Instead of that you should get the data in the controller from the model, and then pass it to the view.

Note double quotes in the js string. you have to have only 2 single quotes in the begin and at the end of the js.