如何使用jquery获取输入值

我有一个带有一些输入字段的html文件。我想在用jquery点击按钮时获得所有输入的值？感谢的帮助

<html>
<body>
<table>
<tr>
<td>No </td>
<td>SKU </td>
<td>Price</td>
</tr>
<tr>
<td>1 </td>
<td><input type="text" name="product[0][sku]" class="form-control" placeholder=""> </td>
<td><input type="text" name="product[0][price]" class="form-control" placeholder=""></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="product[1][sku]" class="form-control" placeholder=""> </td>
<td><input type="text" name="product[1][price]" class="form-control" placeholder=""></td>
</tr>
<tr>
<td>3 </td>
<td><input type="text" name="product[2][sku]" class="form-control" placeholder=""> </td>
<td><input type="text" name="product[2][price]" class="form-control" placeholder=""></td>
</tr>
</table>
<button name="btn" id="btn">Get Product  </button>
</body
</html>

jQuery

$("#btn").on("click", function() {
const contents = $("#tb [name*=sku]").map(function() {
return ({
[$(this).val()]: $(this).closest("tr").find("[name*=price]").val()
})
}).get()
console.log(contents)
})
// OR
$("#btn").on("click", function() {
const contents = $("form").serializeArray();
console.log(contents)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tbody id="tb">
<tr>
<td>No </td>
<td>SKU </td>
<td>Price</td>
</tr>
<tr>
<td>1 </td>
<td><input type="text" name="product[0][sku]" class="form-control" placeholder="" value="sku1"> </td>
<td><input type="text" name="product[0][price]" class="form-control" placeholder="" value="1.00"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="product[1][sku]" class="form-control" placeholder="" value="sku2"> </td>
<td><input type="text" name="product[1][price]" class="form-control" placeholder="" value="2.00"></td>
</tr>
<tr>
<td>3 </td>
<td><input type="text" name="product[2][sku]" class="form-control" placeholder="" value="sku3"> </td>
<td><input type="text" name="product[2][price]" class="form-control" placeholder="" value="3.00"></td>
</tr>
</tbody>
</table>
</form>
<button name="btn" id="btn">Get Product  </button>

香草JS

document.getElementById("btn").addEventListener("click", function() {
const contents = [...document.querySelectorAll("#tb [name*=sku]")].map(sku => 
({[sku.value] : sku.closest("tr").querySelector("[name*=price]").value})
)
console.log(contents)
})

<table>
<tbody id="tb">
<tr>
<td>No </td>
<td>SKU </td>
<td>Price</td>
</tr>
<tr>
<td>1 </td>
<td><input type="text" name="product[0][sku]" class="form-control" placeholder="" value="sku1"> </td>
<td><input type="text" name="product[0][price]" class="form-control" placeholder="" value="1.00"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="product[1][sku]" class="form-control" placeholder="" value="sku2"> </td>
<td><input type="text" name="product[1][price]" class="form-control" placeholder="" value="2.00"></td>
</tr>
<tr>
<td>3 </td>
<td><input type="text" name="product[2][sku]" class="form-control" placeholder="" value="sku3"> </td>
<td><input type="text" name="product[2][price]" class="form-control" placeholder="" value="3.00"></td>
</tr>
</tbody>
</table>
<button name="btn" id="btn">Get Product  </button>

相关内容

最新更新

热门标签：