动态行与下拉复选框不起作用

[英]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.

对不起,代码块很长,我只是想确保我没有留下如此明显的代码。提前感谢您提供的所有帮助,我对这一切都相对较新。

Fiddle

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.itdaan.com/blog/2016/08/15/13d03e8461dcdd2e01e4946b006cdf0b.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告