javascript - 从表行获取数据到 Javascript

Question

我有 table 。共有三列:名称、价格和“下订单”按钮。我必须将每一行的数据获取到我的 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>