Question

我遇到了这个问题。我想获得表的所有输入的所有值，但我很难获得所有值。表中的行数是动态的。

<table id="receiptTable" class="table table-bordered">
<thead>
    <th class="hidden">
        <label>Order Item ID</label>
    </th>
    <th class="col-md-3">
        <label>Item</label>
    </th>
    <th class="col-md-2">
        <label>UOM</label>
    </th>
    <th class="col-md-2">
        <label>Qty</label>
    </th>
</thead>
<tbody>
        <tr>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="qwe123">
            </td>
            <td class="col-md-3">
                <p>
                    Product 1
                </p>
            </td>
            <td class="col-md-2" hidden>
                <p>
                    UNIT
                </p>
            </td>
            <td class="col-md-2">
                <input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="0" required>
            </td>
        </tr>
        <tr>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="abc123">
            </td>
            <td class="col-md-3">
                <p>
                    Product 2
                </p>
            </td>
            <td class="col-md-2" hidden>
                <p>
                    PCS
                </p>
            </td>
            <td class="col-md-2">
                <input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="3" required>
            </td>
        </tr>
</tbody>

我需要获取'.orderItemIDValue'和'.qtyFulfilled'的值，并将它们存储在一个对象数组中。

Answer 1

你可以像这样使用jQuery：

<script>
    jQuery(document).ready(function($)
    {
        var inputValues = [];

        $('input').each(function(i, v)
        {
            inputValues.push($(this).val())
        })
    })
</script>

循环遍历所有输入并将值添加到名为inputValues

的数组中

Answer 2

我选择所有表的行，循环它们并返回一个保存className作为键的对象及其值

let values = [...document.getElementById('receiptTable').getElementsByTagName('tr')].map(row => {
  let orderItemIdValue = row.getElementsByClassName('orderItemIDValue')[0].value;
  let qtyFulfill = row.getElementsByClassName('qtyFulfill')[0].value;
  return {
    orderItemIdValue,
    qtyFulfill
  };
});

Answer 3

使用tr

在table内迭代map

var inputVals = $("#receiptTable tbody tr").map( (i,v) => ({ 
     orderItemId : $(v).find(".orderItemID .orderItemIDValue").val(),
     qty: $(v).find(".orderItemID .qtyFulfill").val()
  })//end of inner function 
).toArray(); //end of map

Answer 4

使用qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()它将返回所有相关的fiels。

$("button").click(function() {
  var orderItemIDValue = [];
  var qtyFulfill = [];

  orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
  qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()

  console.log(orderItemIDValue)
  console.log(qtyFulfill)
})

<强>演示

＆＃13;

$("button").click(function() {
  var orderItemIDValue = [];
  var qtyFulfill = [];
  
  orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
  qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()
  
  console.log(orderItemIDValue)
  console.log(qtyFulfill)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="receiptTable" class="table table-bordered">
  <thead>
    <th class="hidden">
      <label>Order Item ID</label>
    </th>
    <th class="col-md-3">
      <label>Item</label>
    </th>
    <th class="col-md-2">
      <label>UOM</label>
    </th>
    <th class="col-md-2">
      <label>Qty</label>
    </th>
  </thead>
  <tbody>
    <tr>
      <td class="hidden orderItemID">
       <input class="hidden orderItemIDValue" name="orderItemIDValue" value="something">
      </td>
      <td class="col-md-3">
        <p>
          
        </p>
      </td>
      <td class="col-md-2" hidden>
        <p>
         
        </p>
      </td>
      <td class="col-md-2">
        <input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="0" required>
      </td>
    </tr>    <tr>
      <td class="hidden orderItemID">
       <input class="hidden orderItemIDValue" name="orderItemIDValue" value="123">
      </td>
      <td class="col-md-3">
        <p>
          
        </p>
      </td>
      <td class="col-md-2" hidden>
        <p>
         
        </p>
      </td>
      <td class="col-md-2">
        <input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="3" required>
      </td>
    </tr>
  </tbody>
</table>
<button>getdata</button>

＆＃13;

Answer 5

你可以尝试这个Js代码：

function getInputValues(){
  var orderItemIDValueInputs = document.querySelectorAll('.orderItemIDValue');
  var qtyFulfilledInputs = document.querySelectorAll('.qtyFulfilled');
  var store = [];
  orderItemIDValueInputs.forEach(function(input){
    var value = input.value;
    store.push(value);
  });
  qtyFulfilledInputs.forEach(function(input){
    var value = input.value;
    store.push(value);
  });

  return store;
}

Answer 6

结帐本演示。

＆＃13;

$(document).ready(function(){
$('.tableExample tr').not(':first').each(function() {
	
	var val = $(this).find(".orderItemIDValue").val();
  alert(val);
});
})

＆＃13;

.tableExample {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.tableExample thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.tableExample tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableExample">
    <thead>
        <tr>
            <th>Name</th>
            <th>Input</th>
            
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-md-3">
                <p>Test 1</p>
            </td>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="1">
            </td>
        </tr>
         <tr>
            <td class="col-md-3">
                <p>Test 2</p>
            </td>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="2">
            </td>
        </tr>
         <tr>
            <td class="col-md-3">
                <p>Test 3</p>
            </td>
            <td class="hidden orderItemID">
                <input class="hidden orderItemIDValue" name="orderItemIDValue" value="3">
            </td>
        </tr>
        
    </tbody>
</table>

＆＃13;

获取表中所有输入的值

6 个答案: