Question

我正在构建一个引用工具，我在使用JQuery单击Add more按钮时添加了新的表单字段，并希望id也可以更改，以便我可以在我的计算中使用它，但id不会更改。另外，我应该如何在计算中使用它，以便添加动态添加的表单字段。非常感谢。

HTML：

<div class="input_fields_wrap">
              <div class="empBlock3">
                <input type="text" value="Employee" class="employee" id="flex_2" onchange="updateTable2();" />
                <div class="slds-form-element__row" >
                  <div class="slds-form-element slds-size--1-of-4">
                    <div class="status1" name="status1"><h2>Single</h2></div>
                  </div>
                  <div class="slds-form-element slds-size--1-of-4">
                    <input type="number" id="flex_2_single_num" class="slds-input" min="0" max="1500" value="0" name="stepper1" style="width:50%;" onchange="updateTable2();" />
                  </div>
                  <div class="slds-form-element slds-size--1-of-4">
                    $ <input type="text" id="flex_2_single" name="amount1"  class="slds-input" style="width:50%;" onchange="updateTable2();" />
                  </div>
                </div>
                <div class="slds-form-element__row">
                  <div class="slds-form-element slds-size--1-of-4">
                    <div class="status2" name="status2"><h2>Family</h2></div>
                  </div>
                  <div class="slds-form-element slds-size--1-of-4">
                    <input type="number" id="flex_2_family_num" class="slds-input"  min="0" max="1500" value="0" name="stepper2" style="width:50%;" onchange="updateTable2();" />
                  </div>
                  <div class="slds-form-element slds-size--1-of-4">
                    $ <input type="text" id="flex_2_family" name="amount3" class="slds-input" style="width:50%;" onchange="updateTable2();" />
                  </div>
                </div>
                <div class="slds-form-element__row">
                  <div class="slds-form-element slds-size--1-of-4" name="ratio">
                    Ratio:
                    <select>
                      <option value="1:1">1:1</option>
                      <option value="1:2" selected="">1:2</option>
                      <option value="1:3">1:3</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>

JQuery的：

function addMoreRows3() {
    empBlock3 ++;

// Adding extra form fields
   var recRow3 = '<div class="empBlock3'+empBlock3+'"> <br> <div class="empBlock3">\
   <input type="text" value="Employee" class="employee" id="flex_2" onchange="updateTable2();" />\
   <div class="slds-form-element__row" >\
     <div class="slds-form-element slds-size--1-of-4">\
       <div class="status1" name="status1"><h2>Single</h2></div>\
     </div>\
     <div class="slds-form-element slds-size--1-of-4">\
       <input type="number" id="flex_2_single_num" class="slds-input" min="0" max="1500" value="0" name="stepper1" style="width:50%;" onchange="updateTable2();" />\
     </div>\
     <div class="slds-form-element slds-size--1-of-4">\
       $ <input type="text" id="flex_2_single" name="amount1"  class="slds-input" style="width:50%;" onchange="updateTable2();" />\
     </div>\
   </div>\
   <div class="slds-form-element__row">\
     <div class="slds-form-element slds-size--1-of-4">\
       <div class="status2" name="status2"><h2>Family</h2></div>\
     </div>\
     <div class="slds-form-element slds-size--1-of-4">\
       <input type="number" id="flex_2_family_num" class="slds-input"  min="0" max="1500" value="0" name="stepper2" style="width:50%;" onchange="updateTable2();" />\
     </div>\
     <div class="slds-form-element slds-size--1-of-4">\
       $ <input type="text" id="flex_2_family" name="amount3" class="slds-input" style="width:50%;" onchange="updateTable2();" />\
     </div>\
   </div>\
   <div class="slds-form-element__row">\
     <div class="slds-form-element slds-size--1-of-4" name="ratio">\
       Ratio:\
       <select>\
         <option value="1:1">1:1</option>\
         <option value="1:2" selected="">1:2</option>\
         <option value="1:3">1:3</option>\
       </select>\
             </div>\
       </div><a href="javascript:void(0);" onclick="removeRow3('+empBlock3+');">Delete</a></div></div>';
   $('#addedRows3').append(recRow3);
    };

  function removeRow3(removeNum3) {
    $('.empBlock3'+removeNum3).remove();
  };

计算报价工具：

    function updateTable2() { 
    // this updates the table as the values are being filled out
                // get the variables for the first Job Description (hsa_1)
                var flex1_Name = document.getElementById('flex_1').value;
                var flex1_Single_Num = document.getElementById('flex_1_single_num').value;
            var flex1_Single_Limit = document.getElementById('flex_1_single').value;
                var flex1_Family_Num = document.getElementById('flex_1_family_num').value;
            var flex1_Family_Limit = document.getElementById('flex_1_family').value;

                // get the variables for the second Job Description (hsa_2)
                var flex2_Name = document.getElementById('flex_2').value;
                var flex2_Single_Num = document.getElementById('flex_2_single_num').value;
            var flex2_Single_Limit = document.getElementById('flex_2_single').value;
                var flex2_Family_Num = document.getElementById('flex_2_family_num').value;
            var flex2_Family_Limit = document.getElementById('flex_2_family').value;

                var totalSingle = (flex1_Single_Limit * flex1_Single_Num)+(flex2_Single_Limit * flex2_Single_Num);
                var totalFamily = (flex1_Family_Limit * flex1_Family_Num)+(flex2_Family_Limit * flex2_Family_Num);
                var totalCost = totalSingle+totalFamily;

                var flexCostTMP=document.getElementById('iFlexfee');
                var flexCost=flexCostTMP.options[flexCostTMP.selectedIndex].value;


                // update the table values
                document.getElementById('iF1C0').innerHTML=parseInt((totalSingle)*.4);
                document.getElementById('iF1C1').innerHTML=parseInt((totalSingle)*.65);
                document.getElementById('iF1C2').innerHTML=parseInt((totalSingle)*.8);
                document.getElementById('iF1C3').innerHTML=parseInt((totalSingle)*1);

                document.getElementById('iF2C0').innerHTML=parseInt((totalFamily)*.4);
                document.getElementById('iF2C1').innerHTML=parseInt((totalFamily)*.65);
                document.getElementById('iF2C2').innerHTML=parseInt((totalFamily)*.8);
                document.getElementById('iF2C3').innerHTML=parseInt((totalFamily)*1);

                document.getElementById('iF5C0').innerHTML=parseInt((totalSingle)*.4*flexCost) + parseInt((totalFamily)*.4*flexCost);
                document.getElementById('iF5C1').innerHTML=parseInt((totalSingle)*.65*flexCost) + parseInt((totalFamily)*.65*flexCost);
                document.getElementById('iF5C2').innerHTML=parseInt((totalSingle)*.8*flexCost) + parseInt((totalFamily)*.8*flexCost);
                document.getElementById('iF5C3').innerHTML=parseInt((totalSingle)*1*flexCost) + parseInt((totalFamily)*1*flexCost);
                document.getElementById('iF6C0').innerHTML=parseInt((totalSingle)*.4*flexCost) + parseInt((totalFamily)*.4*flexCost) +parseInt(totalFamily*.4) + parseInt(totalSingle*.4);
                document.getElementById('iF6C1').innerHTML=parseInt((totalSingle)*.65*flexCost) + parseInt((totalFamily)*.65*flexCost) +parseInt(totalFamily*.65) + parseInt(totalSingle*.65);
                document.getElementById('iF6C2').innerHTML=parseInt((totalSingle)*.8*flexCost) + parseInt((totalFamily)*.8*flexCost) +parseInt(totalFamily*.8) + parseInt(totalSingle*.8);
                document.getElementById('iF6C3').innerHTML=parseInt((totalSingle)*1*flexCost) + parseInt((totalFamily)*1*flexCost) +parseInt(totalFamily*1) + parseInt(totalSingle*1);
            }

Answer 1

要更改您的案例ID中的item属性，此行可能会有所帮助：

var NewIdValue = "Somthing" ; 
$('#OldIdValue').attr('id') = NewIdValue;

使用JQuery更改动态添加的表单字段的输入ID

1 个答案: