###前提・実現したいこと
◆HTMLで家計簿を作る◆
JSでテーブルの縦計算をしたいです。
・1ページ内に1月から12月分のテーブルを表示させてすべて入力可能
・入力値マイナスにも対応
・収入の合計を表示
・出費の合計を表示
・収入ー出費=合計の残高を一つ下のセルに表示
・個人貯金残高の右のセルに、個人貯金の右に入力した値を表示
・共通貯金残高の右のセルに、共通貯金の右に入力した値を表示
・個人貯金残高と共通貯金残高を足したものを合計貯金残高の右に表示
・入力した値と計算後出力された値が1以下の場合フォントカラーを赤にする
・1月の「個人、共通、合計貯金残高」を2月以降のテーブルの「個人、共通貯金」を2月以降のテーブルの「個人、共通、合計貯金残高」に足して表示する
・「文字」「サンプル」と表示されている箇所は計算しない
・入力、出力された数値をカンマ区切り表示する
・数値を入力する欄に入力されなかった場合「0」を表示する
・あわよくば数値を入力後ボタンを押さずに自動計算される挙動を追加(例:数値を入力後エンターを押すと計算する等)
・合計値が表示されるばしょは入力できないようにする
・localStorageを使って入力値を保存
###現在の状況・発生している問題
・ボタンを押すことで計算され出力される
・横計算になっている。(tr列を計算している)
・文字を入力する列と数値を入力する列の分別ができていない
・計算ボタンを押すと下から5列目の「残高」の箇所に計算結果が出てしまう
・2月以降のテーブルを表示してしまうとテーブルに入力できなくなってしまう
###該当のソースコード
js
1<script type="text/javascript"> 2 /*** 入力できるテーブル<table>セルの初期設定 ***/ 3 var flg = 0; // 入力値判定フラッグ 4 window.onload = function() { 5 var myTbl = document.getElementById('editTbl'); // ID名から要素を参照<table id="ID名"> 6 var len = editTbl.rows[1].cells.length; // 列数, セルへの参照はrowsのcellsコレクション 7 var Td = myTbl.getElementsByTagName('td'); // myTbl内の td要素のリスト(NodeList) 8 for (var i = 0; i < Td.length; i++) { // <td>をループ 9 Td[i].setAttribute('id', 'td' + i); // ID名を設定 10 Td[i].onclick = function() { 11 if (flg == 1) { 12 return 13 } // 半角数値でなければ 14 eDit(this.id); // onclickで 'eDit'を実行 15 } 16 } 17 18 function eDit(id) { // クリックしたセルに 入力領域作成 19 cellNum = document.getElementById(id).cellIndex; // 何列目か 20 if (len - 4 == cellNum) { 21 alert('この列は入力できません。'); 22 return 23 } // もし最後の列なら 24 var Td = document.getElementsByTagName('td'); 25 var Spn = document.createElement('span'); // span要素 生成 26 Spn.setAttribute('contenteditable', 'true') // contenteditable属性を付加 27 Spn.setAttribute('id', 'Spn' + id); //ID名を付加 28 Td[id].innerHTML = ""; // Td[id]の中を空に 29 Td[id].appendChild(Spn); // SpnをTd[id]に追加 これで入力可能になる 30 Spn.focus(); // カーソルを合わせる 31 Spn.onblur = function() { 32 bLur(id); // フォーカスが外れたら 33 } 34 } 35 36 function bLur(id) { 37 var Spn = document.getElementById('Spn' + id); 38 var str = Spn.innerText; 39 str = Spn.textContent; // Spn の値 40 if (str.match(/[^0-9 . -]|[¥s]+/) || str == "") { 41 flg = 1; // 入力チェック 42 } // 半角数値でなければ 再入力 43 flg = 0; 44 Td[id].innerHTML = str; // Td[id]に Spnの値を入れる 45 } 46 } 47 /*** 入力できるテーブル<table>,セルの初期設定 ここまで ***/ 48 49 /* 各行のセルの合計値 算出 */ 50 function calcTbl() { 51 var myTbl = document.getElementById('editTbl'); 52 for (var i = 2; i < myTbl.rows.length; i++) { // <tr>をループ(1行目は,見出し行でスキップ) 53 var num = 0; // セルの値 格納変数 54 var total = 0; // セルの合計値 格納変数 55 for (var j = 0; j < myTbl.rows[i].cells.length - 1; j++) { // tr[i]行目のセルの数 56 num = myTbl.rows[i].cells[j].innerHTML; // tr[i]番目行のtd[j] 番目セルの値,取得 57 num = parseFloat(num); // 数値に変換 58 59 num = num * 1000; // 小数点問題 (-20.2+20=0.1999~)のような現象を回避 60 total += num; // 合計値 61 } 62 total = total / 1000; 63 myTbl.rows[i].cells[j].innerHTML = total; // 行の末尾のセルに合計値 64 myTbl.rows[i].cells[j].style.color = "#cc00ff"; 65 } 66 } 67 </script>
html
1<!DOCTYPE html> 2<html lang=""> 3<head> 4 <meta charset="UTF-8"> 5 <title>javascriptで入力,計算できるテーブル(表)</title> 6 <style type="text/css"> 7 /*テーブルCSS Firefox でborderが表示されなかったりする事の対策を込みで。*/ 8 9 #editTbl { 10 border-collapse: separate; 11 /* 枠線の表示方法 間隔をあけて表示 */ 12 border-spacing: 0; 13 /* 隣合うセルのボーダーにできた隙間の幅を指定 */ 14 border-top: 1px solid #b0c4de; 15 /* 枠線 borderプロパティ: 太さ 種類 色 */ 16 border-right: 1px solid #b0c4de; 17 } 18 #editTbl th, 19 td { 20 height: 25px; 21 width: 75px; 22 border-bottom: 1px solid #b0c4de; 23 border-left: 1px solid #b0c4de; 24 } 25 #editTbl th { 26 color: #000; 27 background: #d7ffd7; 28 } 29 #editTbl td { 30 text-align: right; 31 } 32 #editTbl p { 33 margin: 0; 34 /* contenteditable属性 IE対策 */ 35 } 36 #editTbl span { 37 padding-left: 1px; 38 /* firefoxキャレット位置調整 */ 39 color: #f02406; 40 } 41 </style> 42</head> 43<body> 44 <!--テーブル1月--> 45 <table id="editTbl"> 46 <tr> 47 <th colspan="6">1月</th> 48 </tr> 49 <tr> 50 <th colspan="2">収入</th> 51 <th colspan="2">出費</th> 52 <th colspan="1">備考</th> 53 </tr> 54 <tr> 55 <td>文字</td> 56 <td></td> 57 <td>文字</td> 58 <td></td> 59 <td>サンプル</td> 60 </tr> 61 <tr> 62 <td>文字</td> 63 <td></td> 64 <td>文字</td> 65 <td></td> 66 <td>サンプル</td> 67 </tr> 68 <tr> 69 <td>文字</td> 70 <td></td> 71 <td>文字</td> 72 <td></td> 73 <td>サンプル</td> 74 </tr> 75 <tr> 76 <td>文字</td> 77 <td></td> 78 <td>文字</td> 79 <td></td> 80 <td>サンプル</td> 81 </tr> 82 <tr> 83 <td>文字</td> 84 <td></td> 85 <td>文字</td> 86 <td></td> 87 <td>サンプル</td> 88 </tr> 89 <tr> 90 <td>文字</td> 91 <td></td> 92 <td>文字</td> 93 <td></td> 94 <td>サンプル</td> 95 </tr> 96 <tr> 97 <td>文字</td> 98 <td></td> 99 <td>文字</td> 100 <td></td> 101 <td>サンプル</td> 102 </tr> 103 <tr> 104 <td>文字</td> 105 <td></td> 106 <td>文字</td> 107 <td></td> 108 <td>サンプル</td> 109 </tr> 110 <tr> 111 <td>文字</td> 112 <td></td> 113 <td>文字</td> 114 <td></td> 115 <td>サンプル</td> 116 </tr> 117 <tr> 118 <td>文字</td> 119 <td></td> 120 <td>文字</td> 121 <td></td> 122 <td>サンプル</td> 123 </tr> 124 <tr> 125 <td>文字</td> 126 <td></td> 127 <td>文字</td> 128 <td></td> 129 <td>サンプル</td> 130 </tr> 131 <tr> 132 <td>文字</td> 133 <td></td> 134 <td>個人貯金</td> 135 <td></td> 136 <td>サンプル</td> 137 </tr> 138 <tr> 139 <td>文字</td> 140 <td></td> 141 <td>共通貯金</td> 142 <td></td> 143 <td>サンプル</td> 144 </tr> 145 <tr> 146 <th>合計</th> 147 <td></td> 148 <th>合計</th> 149 <td></td> 150 <td>サンプル</td> 151 </tr> 152 <tr> 153 <th colspan="5">残高</th> 154 </tr> 155 <tr> 156 <td colspan="5"></td> 157 </tr> 158 <tr> 159 <th colspan="3">個人貯金残高</th> 160 <td colspan="2"></td> 161 </tr> 162 <tr> 163 <th colspan="3">共通貯金残高</th> 164 <td colspan="2"></td> 165 </tr> 166 <tr> 167 <th colspan="3">合計貯金残高</th> 168 <td colspan="2"></td> 169 </tr> 170 </table> 171 <p><button type="button" onclick="calcTbl()">計算</button></p> 172 <!--//テーブル1月--> 173</body> 174</html>
上記のやり方は結構無理やりだったりするので、こんなめんどくさいことしなくてもこれでいいじゃん、等々もっと簡単な解決法があればご教示願います…。
イメージとして簡単ではありますが形はこうなればと思います。↓
回答4件
あなたの回答
tips
プレビュー