javascript - 如何向文本框添加动态 ID?
问题描述
我正在尝试将 id 分配给一些在循环中动态创建的文本字段。
由文本字段组成的循环中的 div。
<!-- DATA ENTERED IN THIS TEXT BOX WILL BE REFLECTED IN ALL THE TEXT BOXES CREATED IN THE LOOP-->
<div class="col-sm">
<h5><span class="badge badge-dark">Add Quantity:</span></h5>
<input class="form-control" type="text" name="add0" id="add0" onkeyup="sync()">
</div>
<!-- SCRIPT FOR REFLECTING DATA -->
function sync()
{
var add0 = document.getElementById('add0');
var add1 = document.getElementById('add1');
var add2 = document.getElementById('add2');
var add3 = document.getElementById('add3');
var add4 = document.getElementById('add4');
var add5 = document.getElementById('add5');
var add6 = document.getElementById('add6');
var add7 = document.getElementById('add7');
var add8 = document.getElementById('add8');
add8.value = add7.value = add6.value = add5.value = add4.value = add3.value = add2.value = add1.value = add0.value;
}
<?php
<!-- GETS AN ARRAY OF DATA SCANNED IN THE PREVIOUS PAGE -->
$strings = explode(PHP_EOL,($_SESSION['grid']));
$sa = [];
foreach ($strings as $s) {
array_push($sa, "'".$s."'");
}
$d=implode(',', $sa);
<!-- SQL QUERY -->
$sql = "select distinct size from items where main_group IN(select distinct main_group from items where addl_item_code_barcode IN ($d)) ORDER BY size";
$result = pg_query($db, $sql);
?>
<div class="row">
<!-- THIS LOOP WILL CREATE 8 DIV'S BECAUSE THERE ARE 8 SIZES 36-50 -->
<?php while($res = pg_fetch_assoc($result)){ ?>
<div class="col-md-2 show-hide">
<input type="text" value="<?php echo $res['size']; ?> " readonly
style="background-color: #F5F5F5;" class="form-control"/>
<!-- // OUTPUT WILL BE GENERATED HERE -->
<div id="addition"></div>
<select class="form-control">
<option>25%</option>
<option>50%</option>
<option>100%</option>
</select><br>
</div>
</div>
<br>
<br>
<button type="submit" value="submit" class="btn btn-primary"><i class="fas fa-paint-brush"></i>Apply</button>
</form>
<?php }?>
<!-- The script that I tried for assigning unique id's -->
$(document).ready(function() {
for( var i=1; i<9; i++) //i<9 because that's the maximum number of
// text fields to be created is 8.
{
$('#addition')
.append('<input class="form-control" type="text" name="add" id="add'+i+'" />');
}
问题是这个脚本只在 while 循环的第一次迭代中创建了一系列文本框。
在这里,此输出创建了“大小”字段下方的所有 8 个文本框,即“36”。如何获得低于 38 的第二个文本框和低于 42 的第三个文本框,依此类推......
有没有办法只动态创建 id 并将其附加到输入区域,而不是像我所做的那样将输入本身放入循环中?
解决方案
var text = "";
for(var i=0;i<11;i++)
{
text += '<input class="form-control" type="text" name="add" id="add_'+i+'" /></br>';
}
$("#addition").html(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addition"></div>
推荐阅读
- php - PHPunit 单个 ok/failed 结果
- python - 如何运行我所有的 python 脚本抛出代理
- javascript - 为什么渲染数据不显示?
- javascript - 遍历动态的嵌套对象
- javascript - 有时会出现错误“未处理的拒绝(TypeError):无法读取未定义的属性'值'”
- c# - 如何以编程方式创建 ThemeShadow?(C# UWP 1903)
- r - R Shiny中的两个相互依赖的selectizeInput
- amazon-web-services - 从另一个 AWS API 网关调用一个 AWS API 网关的最快方法
- javascript - react-bootstrap-table2 中的数据未更新
- javascript - 如何在 css-in-js Emotion 中通过自动生成的类名搜索代码?