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

Posted 2023-05-07

【中文标题】如何使用javascript在动态表中添加动态下拉选择

【英文标题】：how to i add dynamically drop down select in dynamically table using javascript

【发布时间】：2013-03-22 00:10:51

【问题描述】：

我如何使用 javascript 在动态表中添加动态下拉选择，但是 我想在cell6.innerhtml= 中使用这个选择而不是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>    

我想在cell6.innerHTML= 中使用此选择而不是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>

现在我在cell6.innerHTML= 上添加了这段代码而不是input type text，但问题是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>';

【参考方案1】：

你试试 Jquery。

如果cell6是一个id，

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

正是这样：

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>';"

【讨论】：

或者在我的问题上查看这个最佳答案***.com/questions/11713388/…

对不起兄弟我没有声望？？超过 15 个声誉需要投票

【参考方案2】：

试试这个：

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>';

但是将数据直接获取到视图中并不是一个好主意（如果您使用的是 MVC 编程）。相反，您应该从模型中获取控制器中的数据，然后将其传递给视图。

注意 js 字符串中的双引号。你必须在 js 的开头和结尾只有 2 个单引号。

【讨论】：

现在我在cell6.innerHTML= 上添加了这个代码而不是input type text 但问题是new table row is not displaying?

在没有看到调试信息之前我不能说更多。在 html 中使用之前，您应该尝试打印此 SQL 查询的结果

我看到你的 js 中有 $_GET['itemcode'] 。用 $_GET["itemcode"]

改变它

到处使用双引号代替单引号