Question

如何使用id="new_amount"获取输入值并将其正确放入更改金额网址路径中。我现在正在尝试的事实显然不正确：

<td>
     <input type="button"
onclick="location.href='${pageContext.request.contextPath}/update?id=${object.id}&?amount=${document.getElementById("new_amount").value}';" 
value="Change Amount" />
</td>

有人可以帮帮我吗。

<table class=goods>
<tr>
    <td>Name</td>
    <td>Amount</td>
</tr>
<c:forEach var="object" items="${goods}">
    <tr>
        <td id="name"><c:out value="${object.name}"></c:out></td>
        <td id="amount"><c:out value="${object.amount}"></c:out></td>
        <td id="new_amount"><p>New amount:</p> <input type="number" id="new_amount" /></td>
        <td><input type="button"
            onclick="location.href='${pageContext.request.contextPath}/update?id=${object.id}&?amount=${document.getElementById("new_amount").value}';" value="Change Amount" /></td>
        <td><input type="button" onclick="location.href='${pageContext.request.contextPath}/delete?id=${object.id }';" value="Delete"/></td>
    </tr>
</c:forEach>
<tr>
    <td><a href="${pageContext.request.contextPath }/addgoods">Add new
        goods</a></td>
</tr>

Answer 1

我已经完成了三行的静态解决方法（用于循环）。这会对你有所帮助。

为表提供id，而不是直接附加值，而是调用函数并为object_id使用隐藏值。还为元素添加了类以查找（ID对于重复元素不是一个好主意。）

您需要做的就是使用JSTL代码更改静态值。

<table id="goods">
    <tr>
        <th>Name</th>
        <th>Amount</th>
        <th>New Amount</th>
        <th>Actions</th>
    </tr>
    <tr>
        <td>test1</td>
        <td>100</td>
        <td><input type="number" name="new_amount" class="amount" /></td>
        <td><input type="button" onclick="updateObject(this)" value="Edit" /> / <input type="button" onclick="deleteObject(this)" value="Delete"/></td>
        <input type="hidden" value="1" class="goods_id" />
    </tr>
    <tr>
        <td>test2</td>
        <td>200</td>
        <td><input type="number" name="new_amount" class="amount" /></td>
        <td><input type="button" onclick="updateObject(this)" value="Edit" /> / <input type="button" onclick="deleteObject(this)" value="Delete"/></td>
        <input type="hidden" value="2" class="goods_id" />
    </tr>
  <tr>
        <td>test3</td>
        <td>300</td>
        <td><input type="number" name="new_amount" class="amount" /></td>
        <td><input type="button" onclick="updateObject(this)" value="Edit" /> / <input type="button" onclick="deleteObject(this)" value="Delete" /></td>
        <input type="hidden" value="3" class="goods_id" />
    </tr>
</table>

使用这些函数获取点击行的值

window.updateObject = function(object){
    // Get nearest text box values based on class.
    var object_id = $(object).closest('tr').find('.goods_id').val();
    var amount = $(object).closest('tr').find('.amount').val();
    alert("ID : "+object_id+" Amount :"+amount);
}

window.deleteObject = function(object){
    var object_id = $(object).closest('tr').find('.goods_id').val();
    alert("ID : "+object_id);
}

请参阅Demo。如果您需要我可以解释更多。希望这会有所帮助。

更新：

在HTML中，您的实际要求如下所示，我使用JSTL

完成了此操作

<table id="goods">
<tr>
    <td>Name</td>
    <td>Amount</td>
    <td>New Amount</td>
    <td>Actions</td>
</tr>
<c:forEach var="object" items="${goods}">
    <tr>
        <td><c:out value="${object.name}"></c:out></td>
        <td><c:out value="${object.amount}"></c:out></td>
        <td><p>New amount:</p> <input type="number" id="new_amount" class="amount" /></td>
        <td><input type="button" onclick="updateObject(this)" value="Change Amount" /> / 
            <input type="button" onclick="deleteObject(this)" value="Delete"/></td>
        <input type="hidden" value="${object.id}" class="goods_id" />
    </tr>
</c:forEach>
<tr>
    <td><a href="${pageContext.request.contextPath }/addgoods">Add new
        goods</a></td>
</tr>

在剧本中，

window.updateObject = function(object){
    // Get nearest text box values based on class.
    var object_id = $(object).closest('tr').find('.goods_id').val();
    var amount = $(object).closest('tr').find('.amount').val();
    //alert("ID : "+object_id+" Amount :"+amount);
    location.href='${pageContext.request.contextPath}/update?id=object_id&?amount=amount';
}

window.deleteObject = function(object){
    var object_id = $(object).closest('tr').find('.goods_id').val();
    //alert("ID : "+object_id);
    location.href='${pageContext.request.contextPath}/delete?id=object_id';
}

从html输入字段获取值

1 个答案: