获取表中所有输入的值答案

【问题标题】：Get values of all the input in a table获取表中所有输入的值
【发布时间】：2018-04-18 01:21:02
【问题描述】：

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

<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' 的值并将它们存储在对象数组中。

【问题讨论】：

您的尝试效果如何？
您介意删除服务器端代码并将最终客户端代码粘贴到您的 sn-p 中吗？谢谢。

标签： javascript jquery input html-table

【解决方案1】：

使用map在table中迭代trs

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

【讨论】：

【解决方案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
  };
});

【讨论】：

【解决方案3】：

你可以像这样使用 jQuery：

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

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

这会遍历所有输入并将值添加到名为 inputValues 的数组中

【讨论】：

【解决方案4】：

使用qtyFulfill = $("input.qtyFulfill").map(function(){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)
})

演示

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

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

【讨论】：

我尝试了您的解决方案安徒生爵士。它不会将它们排列到对象数组中，但我肯定可以使用该数组来创建一个。谢谢！

【解决方案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;
}

【讨论】：

【解决方案6】：

查看此演示。

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

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

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

【讨论】：