SQLのデータの書き換えをid指定してテキストボックスの値を用いて書き換えたい

Question

お菓子の在庫管理を行うためのシステムを作っています
最終的に達成したいことはJavaScriptで読み込んでいる以下の様なSQL

---

お店 情報 商品 在庫 増減
新宿 セール品 チョコ 20 （テキストボックス） 反映（ボタン）
新宿 新商品 アメ 30 （テキストボックス） 反映（ボタン）
渋谷 新商品 ラムネ 40 （テキストボックス） 反映（ボタン）

---

においてリスト上で数値をテキストボックスへ入力して、ボタン押下で在庫の数に増減を反映させることです。
読み込むSQLのIDに関連付けて、数値を反映させようと試みているのですが、うまく指定できていないためか数値の増減の反映先がずれてしまいます。

また現在、このリストに対して、商品名や新商品などで検索を行うことができ、出力する情報を限定することが出来るのですが、それによっても指定先がずれてしまいます。
行ごとに情報を固定し、出力のされ方などに左右されずに増減をリストの在庫数に反映させたいと考えています。

上記リストは複数のcsvファイルを結合したものを読み込んでいます。結合に使ったファイルはそれぞれ以下の通りです。
###CSVファイル
[STOCK] [ITEM]
ID ITEM SHOP ZAIKO ID EVENT SYOUHIN
1 1 1 20 1 1 チョコ
2 2 1 30 2 2 アメ
3 2 2 40 3 2 ラムネ

[EVENT] [SHOP]
ID TEXT ID NAME
1 セール品 1 新宿
2 新商品 2 渋谷
3 限定品

（増減管理用のcsvとして）
[TRANS]
ID STOCK NUM ZAIKO
1 1 20
2 2 30
3 3 40

また、HTML及びそれに関連づいたJavaScriptは以下の通りです。
###HTML

<div class ="formgroup">
<label> 商品</label>
<input name="foo" type="text">
<table>
<thead>
<tr>
<th>店舗</th>
<th>情報</th>
<th>商品</th>
<th>在庫</th>
<th>増減</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>

###JavaScript

//sqlの結合
var sql = 
' SELECT*FROM stock
JOIN shop ON shop.id = stock.shop
JOIN item ON item.id = stock.item
JOIN event ON event.id = item.event
WHERE item.syouhin LIKE? ';

//リスト内の検索
var foo = $.url().param('foo')||'';
$('input[name="foo"]').val(foo) 
var lobs = alasql(sql,[foo+'%'])

//csvの出力
var tbody = $('#tbody');
for(var i=0, i<lobs.length; i++){
var lob =lobs[i]
//行をクリックするとそのidに対応した詳細ページに移動します詳細ページは割愛しています。
var tr = $('<tr data-href = "data.html?id=' + lob.stock.id + '"></tr>');
tr.append('<td>' + lob.shop.name + '</td>');
tr.append('<td>' + lob.event.text + '</td>');
tr.append('<td>' + lob.item.syouhin + '</td>');
tr.append('<td>' + lob.stock.zaiko + '</td>');
tr.append('<td input type=number name=number id=update></td>');
//各行にidに紐づいた形で反映させるボタンを作りたいのですが、コードがあやふやです。
tr.append('<td><button type=submit></button>保存</td> ');


//増減反映
$('#update').on('click', function() {
	var num = parseInt($('input[name="number"]').val());
	alasql('UPDATE stock SET zaiko = ? WHERE id = ?', [ zaiko + num, lob.stock.id ]);
	var trans_id = alasql('SELECT MAX(id) + 1 as id FROM trans')[0].id;
	alasql('INSERT INTO trans VALUES(?,?,?,?)', [ trans_id, lob.stock.id, num, zaiko + num ]);
});

//行をクリックすると詳細ページへ移行させる
$('tbody >tr').css('cursor','pointer').on('click',function(){
window.location = $(this).attr('data-href')
})

開発環境は
OSはWindowsで、eclipseを用いています。
使用言語はmysql、javascript、JQueryを扱っています。
phpやajaxは使用できません。

開発経験が浅く、学び始めたばかりで伝わらないことも多くあるかと思いますが、助言の方よろしくおねがいいたします。

Answer 1

いくつか気になった点を書いていきます。

• mySql と書いているが AlaSｑｌ なのでは。

tr.append('<td input type=number name=number id=update></td>');
について、

• tdの内容が空なのでクリックできないのでは。

tdの中に文字を配置するか、ボタンを配置してそのクリックイベントを拾う形の方がいいでしょう。
ただし現状クリックできていて困っていないなら無視してもらって平気です。

• updateをidとしているが、これでは id=update な要素が複数出現する

同一idの要素はHTML内に１つにする必要があります。
classにupdateとしておいて".update"で拾う方が良いでしょう。

• どのstock.idか残していない

残してなくてもできなくはないですが、このtd（ボタンに変えたならボタン）にdata-idなどの属性をつけて、lob.stock.idを残しておくとやりやすいと思います。
設定したdata-idは clickのfunctionの中で $(this).attr('data-id') で拾えるかと思います。

Comments

[ppy]

回答ありがとうございます。
すみません。alasqlでした。訂正します。

早速以下のようにコーディングしてCSV出力のところへ付け加えました。
tr.append('<td input type=number 　name=number ></td>');
tr.append('<td data-id=' + lob.stock.id + '><button type=submit class=update>保存</button></td>');

$('tbody > td').on('click',function(){
$(this).attr('data-id')
})

ボタンを押すと入力数値で在庫数を増減させたいのですがうまく動きません。

id指定からclass指定にすると、数値増減ができなくなる。(ボタンが反応しない。)
id指定だと出力している行数の最大値がidの値になってしまう。上記なら3行なのでid=3。

デバッグしてみると、data-idはそれぞれのidの値を持っているようなんですが、コーディングがおかしいのでしょうか？

[flied_onion]

click functionの中に $(this).attr('data-id') しかないようですが、変数に入れるなどして利用してください。
data-idを通じて値をとれるだけですので、それを使う処理は別途書く必要があります（もともと updateクリックのfunctionで stock.idがわからないことに困っていたと思ってたので）

Answer 2

alasqlから出力されたものが手元に無いため、検証していませんが、組むならこういう感じかなと思います。（lobsをJSON.stringify()したものを追記いただければもう少し具体的な検証が出来ると思います）

var tbody = $( '#tbody' );
for (var i = 0, i < lobs.length; i++) {
	var lob = lobs[i]
	
	var tr = $('<tr data-href = "data.html?id=' + lob.stock.id + '"></tr>');
	tr.append('<td>' + lob.shop.name + '</td>');
	tr.append('<td>' + lob.event.text + '</td>');
	tr.append('<td>' + lob.item.syouhin + '</td>');
	tr.append('<td>' + lob.stock.zaiko + '</td>');
	tr.append('<td><input type=number name="number"></td>');
	tr.append('<td><button data-id="' + lob.stock.id + '" data-zaiko="' + lob.stock.zaiko + '">保存</button></td> ');
	tbody.append( tr );
}
tbody.on( 'click', 'tr, button', function( e ) { // 追加された要素にも対応できる書き方
	//console.log(e.currentTarget, e.target);
	if ( e.target.tagName.toLowerCase() === 'input' ) {
		 // input要素を編集するときにページ移動してしまわないようにしている
		e.stopPropagation();
		return;
	}
	if ( e.target.tagName.toLowerCase() === 'button' ) { // ボタンを押すときの処理
		e.stopPropagation();
		var button = $( e.target );
		var tr = button.parents( 'tr' );
		var num = parseInt( tr.find( 'input[name="number"]' ).val(), 10 );
		var id =  button.attr( 'data-id' );
		var zaiko =  parseInt( button.attr( 'data-zaiko' ), 10 );
		
		console.log( 'bt:', zaiko + num, id );
		
		alasql('UPDATE stock SET zaiko = ? WHERE id = ?', [zaiko + num, id]);
		var trans_id = alasql('SELECT MAX(id) + 1 as id FROM trans')[0].id;
		alasql('INSERT INTO trans VALUES(?,?,?,?)', [trans_id, id, num, zaiko + num]);
	}
	// クリックイベントは伝播するのでそれを拾う。
	if ( e.currentTarget.tagName.toLowerCase() === 'tr' ) {
		console.log( 'tr:', $( this ).attr( 'data-href' ) );
		window.location = $( this ).attr( 'data-href' );
	}
} );

Answer 3

JavaScrptでSQLを取り扱うのはブラウザから容易にクエリを書き換えることができるためとっても危険なのですが……。

それはさておき、
質問者さんのような事態を回避する方法として、
多いのはデータ取得時に主キー(更新時に利用するキー)も合わせて取得しておき、
隠しフィールド(hidden)などに各行データ毎の在庫IDを保存しておき、
更新時にその更新キーを用いて更新する方法が簡単かと思います。

###追記
見慣れないコードがあるなと調べてみたら、
MySQLでなくAlasqlというものを利用してるですね。

冒頭の危険云々の件はスルーしてください、すみません^^;

Comments

[ppy]

すみません、自分がmysqlとalasqlを混同していたのが原因です。
ありがとうございます。