您的位置:首页 > Web前端 > JavaScript

js按钮获取表单内容

2016-12-06 16:22 465 查看

参照问题

js 表格的每一行都有一个按钮 点击按钮修改当前行某一列的信息
<table><tbody>
<tr>
<td>4</td>
<td id='r'>5<td>
<td><a href="#"><button type="button" >修改</button></a></td>
<td><a href="#"><button type="button" >保存</button></a></td>
</tr>
</tbody></table>
这个tr里的内容是循环出来的,每一行都有一个修改的按钮 ,现在想点击某一行的按钮修改每一行中id='r'这一个td的值


解决答案

<table><tbody>
<tr>
<td>4</td>
<td id='r'>5<td>
<td><a href="#"><button type="button" onclick="update(this)">修改</button></a></td>
<td><a href="#"><button type="button" onclick="save(this)">保存</button></a></td>
</tr>
</tbody></table>

===================

var update = function(btn){
var tr = btn.parentElement.parentElement.parentElement;
var td = tr.cells[1];
var txt = document.createElement("input");
txt.type="text";
txt.value = td.innerHTML;
td.innerHTML = "";
td.appendChild(txt);
}

var save = function(btn){
var tr = btn.parentElement.parentElement.parentElement;
var td = tr.cells[1];
td.innerHTML = td.children[0].value;
}


自己的问题

每个商品点击加入购物车可以进行数据提交

商品列表:
<table  border=1>
<tr>
<td>商品编号</td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品描述</td>
<td>购买数量</td>
</tr>
<c:forEach items="${page.data }" var="item">
<tr class="additem" id="additem">
<td><input type="text" value="${item.item_id }" name="item_id" readonly
style="border: 0px;" /></td>
<td><input type="text" value="${item.item_name }" name="item_name" readonly
style="border: 0px;" /></td>
<td><input type="text" value="${item.item_price }" name="item_price" readonly
style="border: 0px;" />元</td>
<td><input type="text" value="${item.item_detail }"
style="border: 0px;" name="item_detail" readonly /></td>
<td><input class="min" name="" type="button" value="-" /> <input
class="text_box" name="count" type="text" value="0" id="num"
style="width: 25px;" /> <input class="add" name="" type="button"
value="+" /></td>
<td><input type="button" value="加入购物车" onclick="addsuccess(this)"></td>
</tr>
</c:forEach>
</table>


<script language="javascript">
//验证元素是否获取到
/* function addsuccess(btn){
//var rowIndex = obj.parentElement.rowIndex;
var tr = btn.parentElement.parentElement;
var td = tr.cells[0];
// alert(td.innerHTML);
alert(td.children[0].value);
} */
//获取数据并提交
function addsuccess(btn){
var users_id = document.getElementById("users_id").value;
var tr = btn.parentElement.parentElement;
//var tr = btn.parent.parent;
var item_id = tr.cells[0].children[0].value;
var item_name = tr.cells[1].children[0].value;
var item_price = tr.cells[2].children[0].value;
var count = tr.cells[4].children[1].value;
//alert(item_id+"+"+item_name+"+"+item_price+"+"+count);
if(count > 0){
$.post("${pageContext.request.contextPath }/addItems.do" ,
{users_id:users_id,item_id:item_id,item_name:item_name,item_price:item_price,count:count},
function(msg){
if(msg == "加入购物车成功"){
//num.setAttribute("value", 0);
var msg1 = "商品"+item_id+msg;
alert(msg1);
tr.cells[4].children[1].value = 0;
}else{
alert(msg);
}
});
/* this.document.addItem.action = "${pageContext.request.contextPath }/addItems.do";
document.addItem.submit();
alert("加入购物车成功");
num.setAttribute("value", 0);   */
}else{
alert("商品数量不能为0!");
}
}
//商品数量的加减
$(document).ready(function() {
//加的效果
$(".add").click(function() {
var n = $(this).prev().val();
var num = parseInt(n) + 1;
if (num == -1) {
return;
}
$(this).prev().val(num);
});
//减的效果
$(".min").click(function() {
var n = $(this).next().val();
var num = parseInt(n) - 1;
if (num == -1) {
return
}
$(this).next().val(num);
});
})
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: