0
「アイテムを追加」ボタンがあるページがあります。このボタンをクリックすると、ajax呼び出しが行われ、入力されたSKUに基づいてデータベースからのすべての情報が返されたテーブルが返されます。 （ダミーデータはテストのためにそこにあります。）ボタンを1回だけクリックすると、qty値を増減するのに問題はありません。ボタンが2回以上クリックされた場合、2番目の表の増分ボタンをクリックすると、最初の表の値が増加します。テーブル内の1つの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>
誰もがこのことについての提案がありますか？私は数日間、これについて現在作業しているので、本当に助けに感謝します。
ありがとうございます！
私は完全に理解していますが、これは助けになるでしょう...各テーブルには、それらが作成されるときに 'tableID1'や' tableID2'次に、jQueryを使用して、$（this）.attr（ 'id'））。substring（7）を実行してテーブルのIDを取得できます。このIDはあなたのajax呼び出しに渡すことができ、クラス 'tableID + id'のテーブル内のフィールドをインクリメントするためだけに使われます。 – Timm
アイデアに感謝します。アイテムの追加ボタンを1回クリックすると、増減ボタンが大きく機能します。たとえば、アイテムの追加ボタンが2回クリックされ、2番目の行で増減ボタンがクリックされると、1番目の行の数字が変更されます。 – Paul
次に、一意のidメソッドを使用する必要があります。それ以外の場合、jQueryは、そのクラス名で最初の値を選択します。希望するものではありません。 – Timm