从表行获取数据到 Javascript

Question

我有桌子。共有三列：名称、价格和“下单”按钮。我必须从每一行获取数据到我的 Javascript。每个输入都有 id，例如 productName 和 productPrice 。 表格代码：

<table border="2px">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<c:forEach items="${productList}" var="product" varStatus="status">
<tr>
    <form>
    <td> ${product.getProductName()}</td>
    <input type="hidden" id="productName" name="productName" value=${product.getProductName()}>
    <td>${product.getPrice()}</td>
    <input type="hidden" id="productPrice" name="productPrice" value=${product.getPrice()}>
    <td><input type="submit" onclick="makeOrder()" value="Make Order"></td>
    </form>
</tr>
  </c:forEach>
  </table>

还有我的 js：

<script type="text/javascript">
function makeOrder() {
    var n=document.getElementById("productName").value;
    var p=document.getElementById("productPrice").value;
    alert("n="+n);
    alert("p="+p);
    //var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}

但是当我点击我的按钮时，我总是提醒我表格的第一行。 我怎样才能提醒其他行？

Answer 1

为每一行使用一个唯一的行 id 并使用 makeOrder() 函数传递该 id，然后在该行中查找其 id 在函数中传递的子元素...

这是工作示例....

function makeOrder(rowId) 
{
	var n=document.getElementById(rowId).childNodes[5].value;
    var p=document.getElementById(rowId).childNodes[9].value;
    alert("n="+n);
    alert("p="+p);
    //var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}

<table border="2px">
	<tr>
	<th>Name</th>
	<th>Price</th>
	</tr>
	<tr id="row1">
		<form>
		<td>P1</td>
		<input type="hidden" id="productName" name="productName" value="P1">
		<td>$5</td>
		<input type="hidden" id="productPrice" name="productPrice" value="5">
		<td><input type="button" onclick="makeOrder('row1')" value="Make Order"></td>
		</form>
	</tr>
	<tr id="row2">
		<form>
		<td>P2</td>
		<input type="hidden" id="productName" name="productName" value="P2">
		<td>$6</td>
		<input type="hidden" id="productPrice" name="productPrice" value="6">
		<td><input type="button" onclick="makeOrder('row2')" value="Make Order"></td>
		</form>
	</tr>
</table>

Answer 2

您可以调用一个函数，该函数提供名称为 productName 的所有输入，见下文。

var n=document.getElementsByName("productName").value;
var p=document.getElementsByName("productPrice").value;
for(var i = 0; i < n.length; i++) {
    alert("row 1: " + n[i].value + p[i].value);
}

这应该返回您的所有行。每个警报将显示 1 行的数据。