动态行与下拉复选框不起作用
[英]Dynamic row with dropdown checkboxes not working
I have a html form that a user can add and delete rows as needed. This part works as it should. Part of the row is a drop down with check boxes, This also works as it should. The issue at hand is when the user clicks the Add button to add a new row, the check box drop down does not work on the new line.
我有一个html表单,用户可以根据需要添加和删除行。这部分可以正常工作。行的一部分是带有复选框的下拉列表,这也可以正常工作。当前的问题是当用户单击“添加”按钮添加新行时,复选框下拉列表在新行上不起作用。
Sorry the code blocks are so long I just want to make sure I didn't leave something so obvious out. Thank you in advance for any and all help I'm relatively new to all of this.
对不起,代码块很长,我只是想确保我没有留下如此明显的代码。提前感谢您提供的所有帮助,我对这一切都相对较新。
HTML CODE
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<div id="Scope[]" class="dropdown-check-list" tabindex="100">
<span class="anchor" style="background-color:#FFE68C">Select Scope</span>
<ul id="items" class="items">
<input type="checkbox" name="S1" value="100OA"/><font size="4">100OA</font>
<input type="checkbox" name="S2" value="BTank"/><font size="4">BTank</font>
<input type="checkbox" name="S3" value="WSEcon"/><font size="4">WSEcon</font>
<input type="checkbox" name="S4" value="NetPkg"/><font size="4">NetPkg</font>
<input type="checkbox" name="S5" value="CstmCtrl"/><font size="4">CstmCtrl</font>
<br><br>
<input type="checkbox" name="S6" value="CstmRef"/><font size="4">CstmRef</font>
<input type="checkbox" name="S7" value="CstmSM"/><font size="4">CstmSM</font>
<input type="checkbox" name="S8" value="CstmHV"/><font size="4">CstmHV</font>
<input type="checkbox" name="S9" value="CPCTrl"/><font size="4">CPCtrl</font>
<input type="checkbox" name="S10" value="DesiHW"/><font size="4">DesiHW</font>
<br><br>
<input type="checkbox" name="S11" value="DigScroll"/><font size="4">DigScroll</font>
<input type="checkbox" name="S12" value="DFGas"/><font size="4">DFGas</font>
<input type="checkbox" name="S13" value="DWall"/><font size="4">DWall</font>
<input type="checkbox" name="S14" value="MZ-DD"/><font size="4">MZ-DD</font>
<input type="checkbox" name="S15" value="DPP"/><font size="4">DPP</font>
<input type="checkbox" name="S16" value="Encl"/><font size="4">Encl</font>
<br><br>
<input type="checkbox" name="S17" value="PlateHX"/><font size="4">PlateHX</font>
<input type="checkbox" name="S18" value="ERW"/><font size="4">ERW</font>
<input type="checkbox" name="S19" value="ERWModule"/><font size="4">ERWModule</font>
<input type="checkbox" name="S20" value="ERVMod"/><font size="4">ERVMod </font>
<input type="checkbox" name="S21" value="EvapBP"/><font size="4">EvapBP</font>
<br><br>
<input type="checkbox" name="S22" value="PreEvap"/><font size="4">PreEvap</font>
<input type="checkbox" name="S23" value="XP"/><font size="4">XP</font>
<input type="checkbox" name="S24" value="Extended"/><font size="4">Extend</font>
<input type="checkbox" name="S25" value="FanWall"/><font size="4">FanWall</font>
<input type="checkbox" name="S26" value="FillStat"/><font size="4">FillStat</font>
<input type="checkbox" name="S27" value="FFilt"/><font size="4">FFilt</font>
<br><br>
<input type="checkbox" name="S28" value="PFilt"/><font size="4">PFilt</font>
<input type="checkbox" name="S29" value="CarbFilt"/><font size="4">CarbFilt</font>
<input type="checkbox" name="S30" value="CustFilt"/><font size="4">CustFilt </font>
<input type="checkbox" name="S31" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S32" value="GHeat"/><font size="4">GHeat</font>
<br><br>
<input type="checkbox" name="S33" value="HighStatic"/><font size="4">HighStatic</font>
<input type="checkbox" name="S34" value="HGBP"/><font size="4">HGBP</font>
<input type="checkbox" name="S35" value="HGRH"/><font size="4">HGRH</font>
<input type="checkbox" name="S36" value="HPConv"/><font size="4">HPConv</font>
<input type="checkbox" name="S37" value="GFHumid"/><font size="4">GFHumid</font>
<br><br>
<input type="checkbox" name="S38" value="TOHumid"/><font size="4">TOHumid</font>
<input type="checkbox" name="S39" value="MHGRH"/><font size="4">MHGRH</font>
<input type="checkbox" name="S40" value="LowAF"/><font size="4">LowAF</font>
<input type="checkbox" name="S41" value="LowAFSF"/><font size="4">LowAFSF</font>
<input type="checkbox" name="S42" value="LowAmbient"/><font size="4">LowAmbient</font>
<br><br>
<input type="checkbox" name="S43" value="MEHeat(R)"/><font size="4">MEHeat(R)</font>
<input type="checkbox" name="S44" value="MEHeat(I)"/><font size="4">MEHeat(I)</font>
<input type="checkbox" name="S45" value="MGH(R)"/><font size="4">MGH(R)</font>
<input type="checkbox" name="S46" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S47" value="MtrRR"/><font size="4">MtrRR</font>
<br><br>
<input type="checkbox" name="S48" value="MotorGM"/><font size="4">MotorGM</font>
<input type="checkbox" name="S49" value="MZ-Mod"/><font size="4">MZ-Mod</font>
<input type="checkbox" name="S50" value="NatConv"/><font size="4">NatConv</font>
<input type="checkbox" name="S51" value="OAFMS"/><font size="4">OAFMS</font>
<input type="checkbox" name="S52" value="OSMotor"/><font size="4">OSMotor</font>
<br><br>
<input type="checkbox" name="S53" value="MZ-VAV"/><font size="4">MZ-VAV</font>
<input type="checkbox" name="S54" value="Mon"/><font size="4">Mon</font>
<input type="checkbox" name="S55" value="PumpPkg"/><font size="4">PumpPkg</font>
<input type="checkbox" name="S56" value="PipePkg"/><font size="4">PipePkg</font>
<input type="checkbox" name="S57" value="ServLite"/><font size="4">ServLite</font>
<br><br>
<input type="checkbox" name="S58" value="SparkRes"/><font size="4">SparkRes</font>
<input type="checkbox" name="S59" value="SSLube"/><font size="4">SSLube</font>
<input type="checkbox" name="S60" value="UVLights"/><font size="4">UVLights</font>
<input type="checkbox" name="S61" value="VSComp"/><font size="4">VSComp</font>
<br><br>
<input type="checkbox" name="S62" value="LCVAV"/><font size="4">LCVAV</font>
<input type="checkbox" name="S63" value="XFVAV"/><font size="4">XFVAV</font>
<input type="checkbox" name="S64" value="WCCond"/><font size="4">WCCond</font>
<input type="checkbox" name="S65" value="WSHPConv"/><font size="4">WSHPConv</font>
<input type="checkbox" name="S66" value="3RConv"/><font size="4">3RConv</font>
<br><br>
<input type="checkbox" name="S67" value="WiringGM"/><font size="4">WiringGM</font>
<input type="checkbox" name="S68" value="XFan"/><font size="4">XFan</font>
<input type="checkbox" name="S69" value="RFan"/><font size="4">RFan</font>
<input type="checkbox" name="S70" value="SFan"/><font size="4">SFan</font>
<input type="checkbox" name="S71" value="OAHood"/><font size="4">OAHood</font>
<br><br>
<input type="checkbox" name="S72" value="XAHood"/><font size="4">XAHood</font>
<input type="checkbox" name="S73" value="XALouver"/><font size="4">XALouver</font>
<input type="checkbox" name="S74" value="OALouver"/><font size="4">OALouver</font>
<input type="checkbox" name="S75" value="SteamCoil"/><font size="4">SteamCoil</font>
<input type="checkbox" name="S76" value="HWCoil"/><font size="4">HWCoil</font>
<br><br>
<input type="checkbox" name="S77" value="CHWCoil"/><font size="4">CHWCoil</font>
<input type="checkbox" name="S78" value="CondCoil"/><font size="4">CondCoil</font>
<input type="checkbox" name="S79" value="DXCoil"/><font size="4">DXCoil</font>
<input type="checkbox" name="S80" value="F&BP"/><font size="4">F&BP</font>
<input type="checkbox" name="S81" value="Xfrmr"/><font size="4">Xfrmr</font>
</ul>
</div>
</td>
</tr>
</table>
JS Code
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
var checkList = document.getElementById('Scope[]');
var items = document.getElementById('items');
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (items.classList.contains('visible')){
items.classList.remove('visible');
items.style.display = "none";
}
else{
items.classList.add('visible');
items.style.display = "block";
}
}
items.onblur = function(evt) {
items.classList.remove('visible');
}
</script>
1 个解决方案
#1
0
I believe your issue has to do with event binding. You're dynamically adding HTML and therefore events need to be bound to it in order to fire. The answer to this question may help you: Event binding on dynamically created elements?
我相信你的问题与事件绑定有关。您正在动态添加HTML,因此需要将事件绑定到它才能触发。这个问题的答案可能对您有所帮助:动态创建元素的事件绑定?
注意！
本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2016/08/15/13d03e8461dcdd2e01e4946b006cdf0b.html。
角度复选框“全选”功能不起作用 - Angular Checkboxes “Select All” functionality not working
使用CSS设置多个复选框样式不起作用 - Styling multiple checkboxes with CSS is not working
JQuery选中下拉列表中的所有值，复选框不起作用 - JQuery select all values in a dropdown with checkbox not working
动态复选框基于Jquery中的下拉选择 - Dynamic checkboxes based on drop down select in Jquery
带分页的jQuery数据表选择所有不起作用的复选框[重复] - jQuery datatable with pagination select all checkboxes not working [duplicate]
在css中自定义复选框不起作用 - Custom check box in css not working
复选框值在函数内不起作用 - Checkbox value not working within a function
jquery复选框：选中不起作用 - jquery checkbox :checked is not working
JS deactive复选框选择不起作用 - JS deactive checkbox selection not working
AngularJS复选框过滤不起作用 - AngularJS check box filtering not working