javascript - 当在下拉列表中选择一个选项时，在表格的行上显示输入文本框

Question

我有一个表格，其中包含机器类型、序列号 和删除 三列。我在表格上方有一个按钮，它在表格上添加了一行，我在添加的行中有一个按钮，一旦单击它就会删除该行。那部分工作正常。在添加的行中，我有一个下拉列表，它是机器类型和序列号的第二个输入。下拉列表中的两个选项齐头并进。我可以在下拉列表中选择一个选项，然后输入序列号，效果很好。当我添加第二行并选择不同的选项时，问题就开始了，它将第一行的输入更改为第二个输入中的一个。

在我的下拉列表中，当选择others时，我有一个others选项文本框上的序列号。这也很好用。只有当我添加第二行时它才不起作用。

我希望我已经解释了我想要完成的事情。

这是我的代码:

HTML

<!-- Other Machine Accessories -->
                            <div class="col-sm-offset-2 col-sm-8">                                  
                                <div class="resize">
                                <h5>Other Machine Accessories</h5>                                  
                                    <p><input type="button" class="btn btn-success"  value="Add More"></p>
                                    <table id="otherMachineAccessories" class="table table-striped table-bordered table-hover table-condensed">
                                            <thead>
                                                <tr>
                                                    <th>Machine Type</th>
                                                    <th>Serial Number</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <select id="machineAccessories" name="machineAccessories" class="form-control" onchange="CheckMachineAccessories(this.value);">
                                                            <option value="">Please select Machine Accessories</option>
                                                            <option value="Bridge Unit">Bridge Unit</option>
                                                            <option value="Finisher">Finisher</option>
                                                            <option value="Fax Unit">Fax Unit</option>
                                                            <option value="One Bin Tray">One Bin Tray</option>                                                  
                                                            <option value="LCT">LCT</option>
                                                            <option value="Credenza">Credenza</option>
                                                            <option value="Additional Paper Trays">Additional Paper Trays</option>
                                                            <option value="Wireless Card">Wireless Card</option>
                                                            <option value="Others">Others</option>
                                                        </select>                                                               
                                                        <input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersMachineType" placeholder="Please Enetr Machine Type" class="form-control" type="text"/>       
                                                    </td>                                                           
                                                    <td>
                                                        <div class="bridgeAndFinisher" id="bridgeFinisher" style="display:none;">
                                                            <input name="bridgeUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinisher" placeholder="Please Enter Bridge Unit Serial" class="form-control" type="text"><br>
                                                            <input name="finisherTypeSerialNo" onkeydown="upperCaseF(this)" placeholder="Please Enter Finisher Serial" id="bridgeFinisher" class="form-control" type="text">
                                                        </div>
                                                        <input name="faxUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" id="faxUnitSerial" placeholder="Please Enter Fax Unit Serial" class="form-control" type="text"/>
                                                        <input name="OneBinTrayTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" id="oneBinTraySerial" placeholder="Please Enter One Bin Tray Serial" class="form-control" type="text"/>
                                                        <input name="ltcTypeSerial" onkeydown="upperCaseF(this)" style="display:none;" id="lctSerial" placeholder="Please Enter LCT Serial" class="form-control" type="text"/>
                                                        <input name="creTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="credenzaSerial" placeholder="Please Enter Credenza Serial" class="form-control" type="text"/>
                                                        <input name="addTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="additionalPaperTraysSerial" placeholder="Please Enter Additional Paper Trays Serial"  class="form-control" type="text"/>
                                                        <input name="wirelessCard" onkeydown="upperCaseF(this)" style="display:none;" id="wirelessCardSerial" placeholder="Please Enetr Wireless Card Serial" class="form-control" type="text"/>
                                                        <input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersSerial" placeholder="Please Enetr Serial" class="form-control" type="text"/>      

                                                    </td>
                                                    <td><input type="button" class="btn btn-danger" value="Remove" /></td>
                                                </tr>
                                            </tbody>
                                    </table>                    
                                </div>
                            </div><!-- //Other Machine Accessories -->

我的脚本

<!---Script to add other Accossory-->
<script type="text/javascript">

$('#otherMachineAccessories').on('click', 'input[type="button"]', function () {
    $(this).closest('tr').remove();
    })
$('p input[type="button"]').click(function () {
    $('#otherMachineAccessories').append('<tr><td><select id="machineAccessories" name="machineAccessories" class="form-control" onchange="CheckMachineAccessories(this.value);"><option value="">Please select Machine Accessories</option><option value="Bridge Unit">Bridge Unit</option><option value="Finisher">Finisher</option><option value="Fax Unit">Fax Unit</option><option value="One Bin Tray">One Bin Tray</option><option value="LCT">LCT</option><option value="Credenza">Credenza</option><option value="Additional Paper Trays">Additional Paper Trays</option><option value="Wireless Card">Wireless Card</option><option value="others">Others</option></select><input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersMachineType" placeholder="Please Enetr Machine Type" class="form-control" type="text"/></div></td><td><div class="bridgeAndFinisher" id="bridgeFinishere" style="display:none;"><input name="bridgeUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinishere" placeholder="Please Enter Bridge Unit Serial" class="form-control" type="text"/><br><input name="finisherTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinishere" placeholder="Please Enter Finisher Serial" class="form-control" type="text"/></div><input name="faxUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" id="faxUnitSerial" placeholder="Please Enter Fax Unit Serial" class="form-control" type="text"/><input name="OneBinTrayTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" placeholder="Please Enter One Bin Tray Serial" id="oneBinTraySerial" class="form-control" type="text"/><input name="ltcTypeSerial" onkeydown="upperCaseF(this)"style="display:none;" placeholder="Please Enter LCT Serial" id="lctSerial" class="form-control" type="text"/><input name="creTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="credenzaSerial" placeholder="Please Enter Credenza Serial" class="form-control" type="text"/><input name="addTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="additionalPaperTraysSerial" placeholder="Please Enter Additional Paper Trays Serial"  class="form-control" type="text"/><input name="wirelessCard" onkeydown="upperCaseF(this)" style="display:none;" id="wirelessCardSerial" placeholder="Please Wireless Card Serial" class="form-control" type="text"/><input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersSerial" placeholder="Please Enetr Serial" class="form-control" type="text"/></td><td><input type="button" class="btn btn-danger" value="Remove" /></td></tr>')
});

</script>

<!--Machine Accessories Selection-->
<script type="text/javascript">

    function CheckMachineAccessories(val){

        var element=document.getElementById('bridgeFinisher');
        if(val=='pick machine type' || val=='Bridge Unit' || val=='Finisher')
           element.style.display='block';
         else  
           element.style.display='none';

       var element=document.getElementById('bridgeFinisher');
       if(val=='pick machine type' || val=='Bridge Unit' || val=='Finisher')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('faxUnitSerial');
        if(val=='pick machine type' || val=='Fax Unit')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('oneBinTraySerial');
        if(val=='pick machine type' || val=='One Bin Tray')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('lctSerial');
        if(val=='pick machine type' || val=='LCT')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('credenzaSerial');
        if(val=='pick machine type' || val=='Credenza')
           element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('additionalPaperTraysSerial');
        if (val=='pick machine type' || val=='Additional Paper Trays')
             element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('wirelessCardSerial');
        if (val=='pick machine type' || val=='Wireless Card')
             element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('othersSerial');
        if (val=='pick machine type' || val=='Others')
             element.style.display='block';
         else  
           element.style.display='none';

        var element=document.getElementById('othersMachineType');
        if (val=='pick machine type' || val=='Others')
             element.style.display='block';
         else  
           element.style.display='none';
           console.log(val);
    }

</script>

这是我在 Codepen 上的代码

Answer 1

您遇到的问题是，在 HTML 文档中，ID 只能分配给一个元素。由于所有输入的每一行都共享相同的 ID，因此对 document.getElementById 的任何调用都只会返回它在第一行中找到的第一个元素。

有多种方法可以解决此问题，但您可以尝试的一种方法是为表中的每一行分配一个唯一 ID，并在每个输入中使用名称属性。然后，当您尝试调用 CheckMachineAccessories 时，也传入该唯一 ID。然后，您可以不使用 document.getElementById，而是执行类似

的操作

var element = $("#uniqueRowId [name='bridgeFinisher']")[0]

编辑

这里有一些说明:

您希望确保每个具有 ID 的元素都具有唯一的 ID。所以你需要做几件事。首先是确保您添加的行在该行上具有唯一 ID。

//We are starting with 2, because there is already a row in the grid.
var rowId = 2;
$('p input[type="button"]').click(function () {
    $('#otherMachineAccessories').append('<tr id="machineAccessoryRow-' + rowId + '"><td><select id="machineAccessories" name="machineAccessories" class="form-control" onchange="CheckMachineAccessories(this.value, ' + rowId + ');"><option value="">Please select Machine Accessories</option><option value="Bridge Unit">Bridge Unit</option><option value="Finisher">Finisher</option><option value="Fax Unit">Fax Unit</option><option value="One Bin Tray">One Bin Tray</option><option value="LCT">LCT</option><option value="Credenza">Credenza</option><option value="Additional Paper Trays">Additional Paper Trays</option><option value="Wireless Card">Wireless Card</option><option value="others">Others</option></select><input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersMachineType" placeholder="Please Enetr Machine Type" class="form-control" type="text"/></div></td><td><div class="bridgeAndFinisher" id="bridgeFinishere" style="display:none;"><input name="bridgeUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinishere" placeholder="Please Enter Bridge Unit Serial" class="form-control" type="text"/><br><input name="finisherTypeSerialNo" onkeydown="upperCaseF(this)" id="bridgeFinishere" placeholder="Please Enter Finisher Serial" class="form-control" type="text"/></div><input name="faxUnitSerialTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" id="faxUnitSerial" placeholder="Please Enter Fax Unit Serial" class="form-control" type="text"/><input name="OneBinTrayTypeSerialNo" onkeydown="upperCaseF(this)" style="display:none;" placeholder="Please Enter One Bin Tray Serial" id="oneBinTraySerial" class="form-control" type="text"/><input name="ltcTypeSerial" onkeydown="upperCaseF(this)"style="display:none;" placeholder="Please Enter LCT Serial" id="lctSerial" class="form-control" type="text"/><input name="creTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="credenzaSerial" placeholder="Please Enter Credenza Serial" class="form-control" type="text"/><input name="addTypeserial" onkeydown="upperCaseF(this)" style="display:none;" id="additionalPaperTraysSerial" placeholder="Please Enter Additional Paper Trays Serial"  class="form-control" type="text"/><input name="wirelessCard" onkeydown="upperCaseF(this)" style="display:none;" id="wirelessCardSerial" placeholder="Please Wireless Card Serial" class="form-control" type="text"/><input name="others" onkeydown="upperCaseF(this)" style="display:none;" id="othersSerial" placeholder="Please Enetr Serial" class="form-control" type="text"/></td><td><input type="button" class="btn btn-danger" value="Remove" /></td></tr>')

  rowId++;
});

这样的示例将创建具有唯一 ID 的新行。之后，您想将 Id 传递给 CheckMachineAccessories 并根据它过滤您的元素。

function CheckMachineAccessories(val, rowId){
  var element = $("#machineAccessoryRow-" + rowId + " [name='bridgeFinisher']")[0];
  if(val=='pick machine type' || val=='Bridge Unit' || val=='Finisher') {
    element.style.display='block';
  }
  else { 
    element.style.display='none';
  }
}