Javascript 获取表中所有输入的值

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

<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>

订单项目ID
项目
计量单位
数量

产品1


单位


产品2


过程控制系统

---

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

您可以像这样使用jQuery：

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

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

jQuery（文档）.ready（函数（$）
{
var输入值=[]；
$（'input'）。每个（函数（i，v）
{
inputValues.push（$（this.val（））
})
})

---

这将遍历所有输入，并将值添加到名为inputValues的数组中。我将选择表中的所有行，循环它们，并返回一个将类名作为键及其值的对象

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
  };
});

---

使用

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

使用

qtyFulfill=$（“input.qtyFulfill”）.map（函数（）{return$（this.val（）））.get（）

它将返回所有相关字段

$("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)
})

演示

$（“按钮”）。单击（函数（）{
var orderItemIDValue=[]；
var qtyfull=[]；
orderItemIDValue=$（“input.orderItemIDValue”）.map（函数（）{return$（this.val（）}）.get（）
qtyFulfill=$（“input.qtyFulfill”）.map（函数（）{return$（this.val（）}）.get（）
console.log（orderItemIDValue）
console.log（qtyfull）
})

订单项目ID
项目
计量单位
数量








getdata

您可以尝试以下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;
}

查看此演示

$（文档）.ready（函数（）{
$（'.tableExample tr'）。不是（':first'）。每个（函数（）{
var val=$（this.find（“.orderItemIDValue”）.val（）；
警报（val）；
});
})

.tableExample{
边框：实心1px#DDEEEE；
边界塌陷：塌陷；
边界间距：0；
字体：标准13px Arial，无衬线；
}
.表格示例thead th{
背景色：#DDEFEF；
边框：实心1px#DDEEEE；
颜色：336b；
填充：10px；
文本对齐：左对齐；
文本阴影：1px 1px 1px#fff；
}
.表格示例tbody td{
边框：实心1px#DDEEEE；
颜色：#333；
填充：10px；
文本阴影：1px 1px 1px#fff；
}

名称
输入
测试1

测试2

测试3

如何告诉我们您尝试了什么？您是否介意删除服务器端代码并将最终的客户端代码粘贴到您的代码片段中？谢谢。我试过你的解决方案，安徒生先生。它不会把它们排列成一个对象数组，但我肯定可以用这个数组来创建一个对象数组。非常感谢。