0
我有一个带有“添加项目”按钮的页面。点击该按钮后，会进行ajax调用，并根据输入的sku，返回包含数据库中所有信息的表。 （现在有虚拟数据用于测试。）如果仅点击一次按钮，则不会增加或减少数量值。如果单击按钮两次或更多次，如果您单击第二个表上的增量按钮，它将增加第一个表中的值。递增表中一个td的值
我已经添加了一个计数器，它为每个创建的表提供一个唯一的编号。我想我想要做的是弄清楚如何确定正在递增的特定表的计数器编号并将其传递给javascript函数，以便它可以与该特定条目一起使用。
这里是按钮的代码，Ajax调用和JavaScript：
<script type="text/javascript">
var count = 1;
$('#items').live('pageinit',function(event){
$('#additem').click(function() {
//alert("add clicked");
var request = $.ajax({
url: "http://www.furnguy.com/app-pages/additem.php",
type: "POST",
data: {COUNTER : count},
dataType: "html"
});
request.done(function(html) {
//alert("here");
if (html != '') {
$('#salesitems').append(html).trigger('create');
}
});
request.fail(function(jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
count++;
});
});
function deleteItem() {
$('table').click(function(){
$(this).parent().remove();
});
};
function increaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal + 1);
}
};
function decreaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal - 1);
}
};
</script>
</head>
<body>
<div data-role="page" id="items" data-title="Sales Entry - Items">
<div data-role="header">
<h1>Sales Entry</h1>
</div><!-- /header -->
<div data-role="content">
<div id="main_nav">
<span style="float: left; display: inline; width: 100px;">
<label>Enter SKU</label>
</span>
<span style="float: left; display: inline; width: 250px;">
<input type="text" name="initialsku" id ="initialsku" />
</span>
<br /><br /><br />
<button id="additem" data-icon="plus" data-inline="true" data-mini="true" data-theme="b">Add Item</button>
<!-- <button id="removeitem" data-icon="minus" data-inline="true" data-mini="true" data-theme="b">Remove Item</button> -->
<div id="salesitems"></div>
</div>
</div><!-- /content -->
</body>
</html>
这里的页面由AJAX调用：
<?php
$counter = $_POST['COUNTER'];
?>
<body>
<div data-role="fieldcontain">
<div class="addItems">
<table id="myTable" style="border-bottom: 1px solid black;">
<tr>
<td style="width: 50px;">
<label for="qty">Qty:</label>
</td>
<td style="width: 75px;">
<input type="button" value="+" id="increase" onclick="increaseQty();" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty();" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty" value="1" style="float: left; display: inline;" />
</td>
<td style="width: 50px;">
<label for="sku">SKU:</label>
</td>
<td style="width: 350px;">
<input type="text" name="sku" id="sku" readonly="readonly" value="123526874256" />
</td>
<td style="width: 50px;">
<label for="retail">Retail:</label>
</td>
<td style="width: 250px;">
<input type="text" name="retail" id="retail" readonly="readonly" value="$1599.99" />
</td>
<td id="tableNumber">
<?php echo $counter; ?>
</td>
</tr>
<tr>
<td style="width: 50px;">
<label for="desc">Desc:</label>
</td>
<td colspan="5">
<input type="text" name="desc" id="desc" readonly="readonly" value="This is a really big couch." />
</td>
<td>
<input type="button" value="X" onclick="deleteItem();" />
</td>
</tr>
</table>
</div>
</div>
任何人有这个建议？我真的很感谢这个帮助，因为我已经在这里工作了几天了。
在此先感谢！
不知道我完全理解，但也许这会帮助...创建时为每个表创建一个唯一的ID，如“tableID1”和“tableID2”。然后使用jQuery，可以通过执行（$（this）.attr（'id'））。substring（7）来获得表的ID。这个ID可以传递给你的ajax调用，并且只用于增加表中字段的类'tableID + id' – Timm 2012-04-26 18:35:51
感谢您的想法..我会试一试。只是（有希望）澄清，如果添加项按钮被单击一次，那么增加和减少按钮效果很好。例如，如果单击添加项目按钮两次，并在第二行中单击增加/减少按钮，它将更改第一行中的编号。 – Paul 2012-04-26 18:43:44
然后是的，你需要使用唯一的ID方法，否则jQuery只是选择第一个值与该类名称，而不是你想要的 – Timm 2012-04-26 19:02:05