- 締切済み
Javascriptの加工
javascriptによる利益額の計算表を作りたいと思い、javascriptを勉強しています まだ勉強中で自分で０から作るのは難しいので、いろいろ検索して、下の質問のANo.5のサンプルを加工してみようと思いました http://okwave.jp/qa/q6963771.html このサンプルだと、このような表になっています この下にプルダウンで選んだ表が作成されます ▼プルダウン ｜(1)材料名｜(2)一人前当たりの材料数｜(3)［入力欄］人前｜(4)合計材料数｜ これに(3)と同じような列を加えた表に加工したいと思っています。 やりたいこととしては、下のような感じです ▼プルダウン ｜(1)商品名｜(2)標準単価｜(3)［入力欄Ａ］個｜(4)［入力欄Ｂ］％｜(4)合計材料数（単価×Ａ×Ｂ）｜ もうすこし説明しますと、 プルダウンで家電フロア・AVフロアなどを選択すると、(1)(2)に商品名・商品の価格が表示 (3)に５個のような共通の台数を入れ、 (4)に８０と入力して８０％の価格で売ると指定 (5)に各商品の標準単価×５個×８０％ （全品５台限り、80％で売ると各商品の合計金額が表示されるというような感じで） こういったものを作りたいと思い、Javascriptの辞典を片手に加工しようとしているのですが、表が表示されなくなってしまったり、(4)の入力欄が表示されなくなってしまったりと苦戦しています。 どのように加工すればよいのか教えてください＞＜
- quick56
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
かいとうがつきませんね。 そのサンプルのしつもんにかいとうするも、するーされたものです。 まっさらなところから、はじめてみては？ （たのひとがかいたこーどを、りかいしにくくて・・・） まず、ぷろぐらむをぶんかつしてかんがえます。 (A) はいれつをていぎする (B) select ようそのあたいに、へんかがあったばあい、もととなるひょうのはいれつをえる (C) はいれつから、ひょうをせいせいする (D) input ようそにへんかがあるかかんしする (E) へんかがあればけいさんする いつものせりふですが、 ぜんかくくうはくははんかくに。 （table のせいせいにかんして、つっこみどころはありますが、ごかんべん。） ふぁいあ～ふぉっくすでしかためしてません。 <!DOCTYPE html> <html lang="ja"> <head> <title></title> <meta charset="utf-8"> <style> table { border : 1px; } td > input, tfoot th { text-align: right; } td:first-of-type input { text-align: left; } </style> </head> <body> <form action="#"> <p> <select onchange="B.call(this, event)"> <option value="">? <option value="kaden">家電フロア <option value="av">ＡＶフロア </select> </p> <table id="HYOU"> <thead> <tr><th>商品名<th>標準単価<th>［入力欄Ａ］個<th>［入力欄Ｂ］％<th>合計材料数 <thead> <tfoot> <tr> <td colspan="3"> <td><input type="text" value="合計"> <td><input type="text" id="goukei" value="0"> </tfoot> </table> </form> <script> var A = { 'kaden' : [ ['洗濯機', 45000, '', '', '' ], ['冷蔵庫', 56000, '', '', '' ] ], 'av': [ ['スピーカー', 350, '', '', '' ], ['鉱石ラジオ', 1580, '', '', '' ] ] }; var B = function () { var e = this; var v = e.value; var r = v ? A[v]: null; C (r); }; var C = function (ary) { if (! ary) return; var table = document.getElementById('HYOU'); var tbody = document.createElement ('tbody'); var tr, td, inp; var i, I, row; var j, J, col; for (i = 0, I = ary.length; i < I; i += 1) { tr = document.createElement ('tr'); row = ary[i]; for (j = 0, J = row.length; j < J; j += 1) { col = row[j]; td = document.createElement ('td'); inp = document.createElement ('input'); inp.type = 'text'; inp.value = col || ''; td.appendChild (inp); tr.appendChild (td) } tbody.appendChild (tr); } if (table.tBodies.length) table.replaceChild (tbody, table.tBodies[0]); else table.appendChild (tbody); }; var D = function (event) { var e = event./*@cc_on @if(1) srcElement @else@*/ target /*@end@*/; var table = getP (e, 'id', 'HYOU'); if (table) E(table); function getP (n,t,v) { return n?(v== n[t])?n:arguments.callee(n.parentNode,t,v):null } }; var E = function (table) { var i, I; var total = 0, p; var cell; for (i = 1, I = table.rows.length - 1; i < I; i+= 1) { cell = table.rows[i].cells; p = V(cell[1]) * V(cell[2]) * V(cell[3]) / 100; W (cell[4], p); total += p; } document.getElementById('goukei').value = total; function V (td) { return td.firstChild.value;} function W (td,v) { td.firstChild.value = v || ''} }; document./*@if(1) attachEvent( 'on'+ @else@*/ addEventListener(/*@end@*/ /*@if(1) 'focusout' @else@*/ 'blur' /*@end@*/, D, true ); </script> </body>
