遍历type="number"在一张桌子上

Iterate through input of type="number" in a table

本文关键字:quot 一张 type number 遍历      更新时间:2023-09-26
   <table id="Container1Details" cellspacing="15">

    <tbody>
        <tr>
            <td align="right"> 
                <input name="acidity" type="number" maxlength="4" id="acidity" min="0.112" max="0.152" step="0.001" style="width:108px" required="">
            </td>
        </tr>
        <tr>
            <td align="right">
                <span class="h3"> Soda</span>
                <select name="h2O2Test" id="h2O2Test" allow-empty="true">
                    <option value="">NOT TESTED</option>
                    <option value="N">NEGITIVE</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right"> 
                <input name="lacticTest" type="number" maxlength="2" id="lacticTest" min="1" max="20" step="1" style="width:108px" required="">
            </td>
        </tr>
        <tr>    
            <td align='left'>
                <input  name="orderId" size="10pt" type="text" id="orderId"  autocomplete="off"/>
            </td>
        </tr>
    </tbody>
 </table>

是否有可能遍历type="number"的所有输入并为其赋值?我很容易通过使用.find(':text,:file').each(function() {});

来迭代type="text"和type="select"的输入

是的,您可以使用选择器type对类型number做同样的事情:

$('input[type="number"]').each(function(){
    //Assign values HERE
    $(this).val('value');
});

从你的问题看来,你想选择所有的<input>元素,而不管它们的类型属性;因此我建议:

// selects all <input> elements, and uses the val() method
// to iterate over the returned elements:
$('input').val(function (index, currentValue) {
    // the switch retrieves the type property-value
    // of the current node:
    switch (this.type) {
        // and if it's equal to 'number':
        case 'number':
            // we return the average between the max and min values:
            return (parseFloat(this.max) + parseFloat(this.min)) / 2;
            break;
        // if it's of type equal to 'text':
        case 'text':
            // we return the string of 'appropriateValue':
            return 'appropriateValue';
            break;
    }
});

$('input').val(function(index, currentValue) {
  switch (this.type) {
    case 'number':
      return (parseFloat(this.max) + parseFloat(this.min)) / 2;
      break;
    case 'text':
      return 'appropriateValue';
      break;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Container1Details" cellspacing="15">
  <tbody>
    <tr>
      <td align="right">
        <input name="acidity" type="number" maxlength="4" id="acidity" min="0.112" max="0.152" step="0.001" style="width:108px" required / </td>
    </tr>
    <tr>
      <td align="right"> <span class="h3"> Soda</span>
        <select name="h2O2Test" id="h2O2Test" allow-empty="true">
          <option value="">NOT TESTED</option>
          <option value="N">NEGITIVE</option>
        </select>
      </td>
    </tr>
    <tr>
      <td align="right">
        <input name="lacticTest" type="number" maxlength="2" id="lacticTest" min="1" max="20" step="1" style="width:108px" required="" />
      </td>
    </tr>
    <tr>
      <td align='left'>
        <input name="orderId" size="10pt" type="text" id="orderId" autocomplete="off" />
      </td>
    </tr>
  </tbody>
</table>

JS Fiddle demo.

只关注那些typenumber<input>元素,则:

$('input[type=number]').val(function (index, currentValue) {
    // sets the new value of each number-<input> to the
    // result of the parsed current-value multiplied by
    // the index of the current element in the collection
    // returned by the selector:
    return parseInt(currentValue, 10) * index;
});