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行的数据。

从表行获取数据到Javascript

2 个答案: