jquery datatablesを使用 インプットタグに数値入力して行の合計金額を出したい

jqueryをあまり理解せずに使用している素人の投稿ですみませんがご教授いただけましたら幸いです。

現在、下記のようにdatatablesを利用して納品書のようなものを作成したいと思っています。

<table id="master_store_index_list_table" class="table table-striped">
<thead>
<tr class="alert-info">
<th>商品名</th>
<th>単価</th>
<th>入数</th>
<th>計</th>
</tr>
</thead>
<tbody>
<tr>
<td>サッカーボール</td>
<td>2,500円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>テニスボール</td>
<td>2,000円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>バレーボール</td>
<td>1,900円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>ドッジボール</td>
<td>1,500円</td>
<td><input></td>
<td></td>
</tr>
</tbody>
</table>

jquery datatablesでいろいろ調べた結果、
footerCallbackのように列の合計を表示するような
サンプルはいくつか見つかったのですが行の合計を出すやり方が見つかりません。

jquery datatablesで詳しいかた、大変恐縮ですがscriptを教えてください。


希望
①inputの部分に個数を入力して、単価×個数の計を表示したい
②個数を入力していない箇所はエラーが出ないようにしたい
③合計数字はカンマ入りで表示したい
④全ての合計は下部に小計、消費税、合計と表示したい
※datatablesでfooterCallbackを記載したが合計しか出ない

お忙しい中、大変恐縮ですが何卒宜しく御願い致します。

質問者からの補足コメント

• また、再計算ボタンを押しても計算されていないようです。。
  
  1番目のスクリプトと2番目の解答のスクリプトを２つ設置するのでしょうか。

  No.3の回答に寄せられた補足コメントです。 補足日時：2016/07/01 10:06

• 1つ目のスクリプトを設置するとちゃんと行計算される。
  
  上記を消して、2番目のスクリプトを設置すると行計算も再計算もできないです。。
  
  1番目と2番目のスクリプトは同時に設置してもよいのでしょうか

  No.4の回答に寄せられた補足コメントです。 補足日時：2016/07/01 11:18

No.3 ベストアンサー 回答者： yambejp 回答日時： 2016/06/29 18:52

この際だからdatatablesは無視して進めます

<script>
$(function(){
$('#master_store_index_list_table input').change(function(){calc();})
$('input[value="再計算"]').click(function(){calc();})
});
function addFigure(str) {
var num = new String(str).replace(/,/g, "");
while(num != (num = num.replace(/^(-?[0-9]+)([0-9]{3})/, "$1,$2")));
return num;
}
function calc() {
var shokei=0;
$('#master_store_index_list_table tbody td:nth-child(3) input').each(function(){
var tanka=$(this).parent().prev().text().replace(/[,円]/g,'');
var irisu=$(this).val();
var kingaku=" ";
if(irisu.match(/^[0-9]*$/)){
kingaku=tanka*irisu;
shokei+=kingaku;
kingaku=kingaku?addFigure(kingaku):" ";
}
$(this).parent().next().text(kingaku);
});
$('#shokei').text(shokei?addFigure(shokei):" ");
$('#zei').text(shokei?addFigure(parseInt(shokei*0.08)):" ");
$('#gokei').text(shokei?addFigure(parseInt(shokei*1.08)):" ");

}
</script>
<table id="master_store_index_list_table" class="table table-striped" border>
<thead>
<tr class="alert-info">
<th>商品名</th>
<th>単価</th>
<th>入数</th>
<th>計</th>
</tr>
</thead>
<tbody>
<tr>
<td>サッカーボール</td>
<td>2,500円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>テニスボール</td>
<td>2,000円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>バレーボール</td>
<td>1,900円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>ドッジボール</td>
<td>1,500円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>小計：</td>
<td id="shokei"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>消費税：</td>
<td id="zei"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>合計：</td>
<td id="gokei"></td>
</tr>
</tbody>
</table>
<input type="button" value="再計算">

この回答へのお礼

ありがとうございます。　1つ目の解答では行計算がうまくいっていたのですが、
今回の解答でいただいたスクリプトを設置すると行計算と合計がうまく表示されません。

どこかID指定したりするのでしょうか。

お礼日時：2016/07/01 09:57

No.6 回答者： yambejp 回答日時： 2016/07/01 12:06

>1番目に書いてもらったスクリプトは無視していいんですよね・・？

無視してください

この回答へのお礼

yambejp様

無事動きました。
本当にありがとうございます。

厚かましいのですが、この納品書入力の部分で
送料を記載する項目を忘れていました。

もしよろしければ再度ご教示願えればと思います。

送料は数パターンあります。

①佐川便（1200円）で弊社が負担する場合
②佐川便（1200円）で顧客が負担する場合
③ヤマト便（1000円）で弊社が負担する場合
④ヤマト便（1000円）で顧客が負担する場合
⑤ヤマト便（500円）で弊社が半分負担する場合

上記をセレクトタブで選び、選んだものを単価に表示して
そのうえ個数を入力して自動計算したいなと思います。
例①を選択して2ケース配送する場合は

単価1200円　　個数２　計2400円

このようなことは可能でしょうか。

※この質問は解決済みになってしまっていますので
別で質問したほうが良いならおっしゃってください。
お願いします

お礼日時：2016/07/06 10:52

No.5 回答者： yambejp 回答日時： 2016/07/01 11:53

ttps://code.jquery.com/jquery-2.1.4.min.js

ttps://code.jquery.com/jquery-1.12.3.js
ttps://code.jquery.com/ui/1.11.4/jquery-ui.min.js

ご指摘の上記を組み込んだうえで、#3のソースをテーブルまで含め
コピペしましたが問題なく動きますね

ご利用の環境の問題かもしれないので、
firefoxをご利用でしたらF12でデバッガを起動したうえで
エラー状況を確認してみてください
私の環境ではIE11、firefox、chrome、edgeでも問題ないようです
（むしろ私の環境がおかしい？）

この回答へのお礼

ありがとうございます。再度やってみます。

1番目に書いてもらったスクリプトは無視していいんですよね・・？

お礼日時：2016/07/01 12:04

No.4 回答者： yambejp 回答日時： 2016/07/01 10:06

>今回の解答でいただいたスクリプトを設置すると行計算と合計がうまく表示されません。

あれ？そうですか？
一応各ブラウザで挙動確認しているのですが・・・
まさかと思いますがjqueryライブラリを読み込んでないとかないですよね？

この回答へのお礼

<!-- jQuery 2.1.4 -->
<script src="/adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min. …
<!-- jQuery UI 1.12.3 -->
<script src="https://code.jquery.com/jquery-1.12.3.js"></scri …


上記が記載してあるのですがまちがってますでしょうか

お礼日時：2016/07/01 11:00

No.2 回答者： fujillin 回答日時： 2016/06/29 18:12

こんにちは。

同じく素人です。

datatablesって存じませんが、これのことでしょうか？
https://datatables.net/

じっくり読めばわかるのだろうと思いますが、英語がさっぱりな上にボリュームがありすぎて・・・（汗）
とりあえず超拾い読みの上での、テキトーですが・・・
こんな感じでしょうか？
※ 拾い読みなので、要領が悪いかもしれません。
※ 入力値のチェックや計算などは処理場の最低限の内容になっていますので、きちんとなさるほうがよろしいと思います。
※ datatables的に記述したつもりですが、各種の機能と全て整合しているかまでは確認していません。

とりあえずは、こんな感じでできるのではというつもりのサンプルです。
（インデントは全角空白にしてありますので、半角にしてください）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dat …
<link href="https://cdn.datatables.net/1.10.12/css/jquery.da … type="text/css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function() {
　var tbl = $("#test_table").DataTable();

　$("#test_table tbody").on("change", "input", function(evt){
　　var val = $(this).val();
　　var rw = tbl.row($(this).closest("td"));
　　if( parseInt(val)==val ){
　　　var price = parseInt(rw.data()[1].replace(",",""));
　　　var total = (price * val).toString();
　　　while(total != (total = total.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
　　　tbl.cell(rw, 3).data(total + "円");
　　} else if(val == ""){
　　　 tbl.cell(rw, 3).data("");
　　} else alert("整数を入力 !");
　});
});
</script>
</head>
<body>
<table id="test_table">
<thead>
<tr class="alert-info">
<th>商品名</th>
<th>単価</th>
<th>入数</th>
<th>計</th>
</tr>
</thead>

<tbody>
<tr>
<td>サッカーボール</td>
<td>2,500円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>テニスボール</td>
<td>2,000円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>バレーボール</td>
<td>1,900円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>ドッジボール</td>
<td>1,500円</td>
<td><input></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

この回答へのお礼

ありがとうございます。
試してみます

お礼日時：2016/07/01 09:58

No.1 回答者： yambejp 回答日時： 2016/06/29 15:54

とりあえず行の小計ならjQueryだけでも、相対位置を確認すればいけそうですが

<script>
$(function(){
$('#master_store_index_list_table input').change(function(){
var this_num=$(this).val();
var prev_num=$(this).parent().prev().text().replace(/[,円]/g,'');
var next_num=this_num*prev_num;
$(this).parent().next().text(addFigure(next_num));
})
var shokei=0;
})
function addFigure(str) {
var num = new String(str).replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}
</script>


<table id="master_store_index_list_table" class="table table-striped" border>
<thead>
<tr class="alert-info">
<th>商品名</th>
<th>単価</th>
<th>入数</th>
<th>計</th>
</tr>
</thead>
<tbody>
<tr>
<td>サッカーボール</td>
<td>2,500円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>テニスボール</td>
<td>2,000円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>バレーボール</td>
<td>1,900円</td>
<td><input></td>
<td></td>
</tr>
<tr>
<td>ドッジボール</td>
<td>1,500円</td>
<td><input></td>
<td></td>
</tr>
</tbody>
</table>

この回答へのお礼

yambejp様

ありがとうございます。
教えていただいたスクリプトで行計算が表示できるようになりました。

ただ、footerへの合計がうまくできません。
もしお手すきでしたら、フッターへ小計、消費税、合計と出せるようなやり方も教えていただければ幸いです。

お礼日時：2016/06/29 16:46