Question

我有很多表行，我希望将每行的值（它是一个数字）放到数组中！

<form class="form-horizontal" id="form1" name="form1" method="post" action="url">
<table id="temp1" class="table datatable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td><input type="number" id="pduct1" class="product" name="pduct[]" /></td>
        </tr>
        <tr>
            <td>B</td>
            <td><input type="number" id="pduct2" class="product" name="pduct[]" /></td>
        </tr>
        <tr>
            <td>C</td>
            <td><input type="number" id="pduct3" class="product" name="pduct[]" /></td>
        </tr>
        <tr>
            <td>D</td>
            <td><input type="number" id="pduct4" class="product" name="pduct[]" /></td>
        </tr>                        
    </tbody>
</table>

就像这段代码一样，我希望得到每个“pduct”的价值！

Answer 1

您可以使用$('#temp1 input[name="pduct[]"]')选择相关元素 - 也就是说，使用元素“name属性，但仅限于#temp1内的输入。

要获取所有值，可以使用.map() method，它返回一个新的jQuery对象，然后使用.get() method将其转换为数组：

var arr = $('#temp1 input[name="pduct[]"]').map(function() { return this.value }).get()

在按钮单击的上下文中，您将获得以下内容：

$("button").click(function() {
  var arr = $('#temp1 input[name="pduct[]"]').map(function() { return this.value }).get()

  console.log(JSON.stringify(arr))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">Get Values</button>
<table id="temp1" class="table datatable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td><input type="number" id="pduct" name="pduct[]" /></td>
        </tr>
        <tr>
            <td>B</td>
            <td><input type="number" id="pduct" name="pduct[]" /></td>
        </tr>
        <tr>
            <td>C</td>
            <td><input type="number" id="pduct" name="pduct[]" /></td>
        </tr>
        <tr>
            <td>D</td>
            <td><input type="number" id="pduct" name="pduct[]" /></td>
        </tr>                        
    </tbody>
</table>

请注意，问题原始版本中的HTML无效，因为id属性必须是唯一的。但这并不能阻止此代码正常工作，因为我正在根据name属性进行选择。

Answer 2

在输入标记中添加class属性。（例如class="abc"）

使用Jquery。

$('.abc').each(function(i, obj) {
    //$(this).val(); << return value
});

Answer 3

<强> JQuery的

您可以使用serialize()和serializeArray()来获取表单的所有输入值。

在您的示例中，您可以执行以下操作：

var formData = $('#form1').serializeArray();    \\Outputs in the form [{name, value}]
var formArray = formData.map(function(element){ \\If you only want the values
	return element.value;
})

<form class="form-horizontal" id="form1" name="form1" method="post" action="url">
<table id="temp1" class="table datatable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td><input type="number" id="pduct1" class="product" name="pduct[]" value="1"/></td>
        </tr>
        <tr>
            <td>B</td>
            <td><input type="number" id="pduct2" class="product" name="pduct[]"  value="2"/></td>
        </tr>
        <tr>
            <td>C</td>
            <td><input type="number" id="pduct3" class="product" name="pduct[]"  value="3"/></td>
        </tr>
        <tr>
            <td>D</td>
            <td><input type="number" id="pduct4" class="product" name="pduct[]"  value="4"/></td>
        </tr>                        
    </tbody>
</table> 
</form>

原生Javascript

您可以通过实例化FormData对象并使用它的方法来获取所有输入值，从而在本机javascript中执行相同操作。

var form = document.getElementById("form1");
var formData = new FormData(form);
var formArray = [];
for(var value of formData.values()){
	formArray.push(value);
}

<form class="form-horizontal" id="form1" name="form1" method="post" action="url">
<table id="temp1" class="table datatable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td><input type="number" id="pduct1" class="product" name="pduct[]" value="1"/></td>
        </tr>
        <tr>
            <td>B</td>
            <td><input type="number" id="pduct2" class="product" name="pduct[]"  value="2"/></td>
        </tr>
        <tr>
            <td>C</td>
            <td><input type="number" id="pduct3" class="product" name="pduct[]"  value="3"/></td>
        </tr>
        <tr>
            <td>D</td>
            <td><input type="number" id="pduct4" class="product" name="pduct[]"  value="4"/></td>
        </tr>                        
    </tbody>
</table> 
</form>

从多个表中获取价值

3 个答案: