2013年12月29日

javascriptで入力,計算できるテーブル(表)<table>

スポンサード リンク

 <table>のセルの値を足し算します。
contenteditable属性で入力可能にしています

-理科国語社会算数合計
鳩島 晴夫7003040.77
阿管 由人350-507
野山 佳広00-20.220

 javascriptでテーブルのセルをクリックしたときに入力 可能にするに計算機能を
付けました。といっても簡単な足し算です。半角数値 を入力してください。

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>javascriptで入力,計算できるテーブル(表)</title>
<style type="text/css">
     /*テーブルCSS Firefox でborderが表示されなかったりする事の対策を込みで。*/
#editTbl{
   border-collapse: separate; /* 枠線の表示方法  間隔をあけて表示 */
   border-spacing: 0; /* 隣合うセルのボーダーにできた隙間の幅を指定 */
   border-top: 1px solid #b0c4de; /* 枠線 borderプロパティ: 太さ 種類 色 */
   border-right: 1px solid #b0c4de;
      }
#editTbl th,td{
    padding: 5px 15px;
    border-bottom: 1px solid #b0c4de;
    border-left: 1px solid #b0c4de;
     }
#editTbl th{
   color: #000;
   background: #d7ffd7;
     }
#editTbl td{
  text-align: right;
    }
#editTbl p{
  margin: 0; /* contenteditable属性 IE対策 */
    }
#editTbl span{
  padding-left:1px; /* firefoxキャレット位置調整 */
  color: #f02406;
   }
</style>
<script type="text/javascript">
        /***   入力できるテーブル<table>セルの初期設定   ***/
var flg=0; // 入力値判定フラッグ
window.onload = function(){
var myTbl = document.getElementById('editTbl');// ID名から要素を参照<table id="ID名">
var len=editTbl.rows[1].cells.length; // 列数, セルへの参照はrowsのcellsコレクション
var Td = myTbl.getElementsByTagName('td'); // myTbl内の td要素のリスト(NodeList)
  for(var i=0; i<Td.length; i++){ // <td>をループ
   Td[i].setAttribute('id','td'+i); // ID名を設定
    Td[i].onclick =function(){if(flg==1){return} // 半角数値でなければ
     eDit(this.id); // onclickで 'eDit'を実行
         }
 	}
  function eDit(id){  // クリックしたセルに 入力領域作成
   cellNum=document.getElementById(id).cellIndex; // 何列目か
    if(len-1==cellNum){alert('この列は入力できません。'); return} // もし最後の列なら
     var Td = document.getElementsByTagName('td');
      var Spn = document.createElement('span'); // span要素 生成
           Spn.setAttribute('contenteditable','true')// contenteditable属性を付加
	      Spn.setAttribute('id','Spn' + id); //ID名を付加
	     Td[id].innerHTML=""; // Td[id]の中を空に
          Td[id].appendChild(Spn); // SpnをTd[id]に追加 これで入力可能になる
	   Spn.focus(); // カーソルを合わせる 
	  Spn.onblur = function(){ bLur(id);  // フォーカスが外れたら
		}
	   }
function bLur(id){
  var Spn = document.getElementById('Spn' + id);
  var str=Spn.innerText;str=Spn.textContent; // Spn の値
   if(str.match(/[^0-9 . -]|[¥s]+/)||str==""){ flg=1; // 入力チェック
    alert("半角数値を入れてください。"); 
     eDit(id); return;} // 半角数値でなければ 再入力
   flg=0; Td[id].innerHTML=str; // Td[id]に Spnの値を入れる
	}
   }
     /*** 入力できるテーブル<table>,セルの初期設定 ここまで  ***/

        /* 各行のセルの合計値 算出 */
function calcTbl() {
var myTbl = document.getElementById('editTbl');
 for(var i=1;i< myTbl.rows.length;i++){ // <tr>をループ(1行目は,見出し行でスキップ)
   var num = 0; // セルの値 格納変数
   var total = 0;// セルの合計値 格納変数 
 for(var j=1;j< myTbl.rows[i].cells.length-1;j++){ // tr[i]行目のセルの数
  num=myTbl.rows[i].cells[j].innerHTML; // tr[i]番目行のtd[j] 番目セルの値,取得
  num = parseFloat(num); // 数値に変換 
  num = num *1000;// 小数点問題 (-20.2+20=0.1999〜)のような現象を回避
    total+=num; // 合計値
      }
 total = total/1000;
  myTbl.rows[i].cells[j].innerHTML=total; // 行の末尾のセルに合計値
   myTbl.rows[i].cells[j].style.color="#cc00ff";
       }
    } 
</script>
</head>
<body>
  <table id="editTbl">
   <tr>
<th>-</th><th>理科</th><th>国語</th><th>社会</th><th>算数</th><th>合計</th>
  </tr><tr>
<th>鳩島 晴夫</th><td>700</td><td>30</td><td>40.7</td><td>7</td><td></td>
  </tr><tr>
<th>阿管 由人</th><td>3</td><td>50</td><td>-50</td><td>7</td><td></td>
  </tr><tr>
<th>野山 佳広</th><td>0</td><td>0</td><td>-20.2</td><td>20</td><td></td>
  </tr>
 </table>
<p><button type="button" onclick="calcTbl()">計算</button></p>
</body>  
</html>
入力できるテーブル<table>セルの初期設定
これは次のコンテンツを参考にしてください。
javascriptでテーブルのセルをクリックしたときに入力 可能にする
各セルの値 取得 、合計計算
  myTbl.rows[i]; rowsコレクションでテーブル内の行の位置を得ます。
「i」が 0なら1行目、1なら2行目、2なら3行目..........になります。
  myTbl.rows[i].cells[j];  rowsのcellsコレクションでテーブルの行内のセルの位置を得ます。
「j」が 0なら i 行目の一列目、1なら二列目..........になります。
  Tbl.rows[i].cells[j]でセルを確定します。「i」が 1で、「j」が 2なら
2行目の3列目のセルになります。rowsコレクション,cellsコレクション
 そして innerHTMLでその値を取得し
numに代入します。この値は"数値文字列"なのでこのままでは計算できません。
parseFloat関数を使って数値に変換します。 num = parseFloat(num);
total+=num;
でセルの値を累積し、myTbl.rows[i].cells[j].innerHTML=total;
各行の最後のセルに合計値を設定していきます。
parseFloat(string)関数
この関数は引数 string に格納されている文字列を先頭から調べ、数値でない文字に
出会うまでの文字列を数値に転換します。parseFloat()関数
posted by javaScript at 22:28 | 大阪 ☀ | テーブル | このブログの読者になる | 更新情報をチェックする

2013年12月27日

parseFloat()関数

スポンサード リンク

 parseFloat(string)関数は、文字列を解析し数値に変換します。

  この関数は引数 string に格納されている文字列を先頭から調べ、数値でない文字に
出会うまでの文字列を数値に転換します。
 例を挙げればstring 引数が「2020年 東京オリンピック 平成32年」で、あれば
parseFloat(string);で 2020 が返ります。2020以降の文字列は数値があっても無視されます。
パラメータ
string : 解析される文字列  // 必須
戻り値
 変換された数値(浮動小数点数)。
先頭の文字が数値でない文字の場合は NaN
詳細
 この関数は引数 string の文字列を最初の文字から走査して、
数値でない文字が出現するまでの文字列を数値に変換します。
 ここでの数値と、される文字は文字列先頭の正負記号(+,−)、と数字、小数点
数値を指数表現 (指数関数) で表示する時に使う "e"などです。
 文字列の前後に空白があってもOKですが
文字列の中に空白があるとそこで中断されてしまいます。
 parseInt関数と違って少数点以下の切り捨てはありません。が
3.00 など小数点以下が 0の場合は 3に変換されます。
表示例
parseFloat(" 2020年  ")--> 2020
parseFloat("東京2020") --> NaN
parseFloat("12 34 56") --> 12
parseFloat("314e-2")   --> 3.14
parseFloat("-0077")    --> -77
parseFloat("--20px")   --> NaN
parseFloat(" ")        --> NaN
お試し入力  parseFloat(string) parseFloat( )  // ここに結果を表示


ロリポップ!のドメインは選べる全85種類!!
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>parseFloat()関数</title>
<script type="text/javascript">
<!--
  function txtCng(){
   Tstr01=document.getElementById("tBox01").value;
    document.getElementById("kekka").innerHTML=parseFloat(Tstr01);
     }
 // -->
 </script>
 </head>
 <body>
  <form>
   <fieldset> <!--フォームの要素の周りに枠線-->
    <legend>お試し入力</legend> <!--fieldset要素へ表題を定義-->
  parseFloat <input type="text" size="10" id="tBox01" />
 &nbsp;//&nbsp;&nbsp;<span id="kekka">ここに結果を表示</span>
  <br />
 <input type="button" value="変換" onclick="txtCng()" />
 <br />
</fieldset>
</form>
</body>
</html>
<input type="text" /> の値に parseFloat()関数
テキストボックスを使って計算
+
フォームのテキスト入力ボックスは数値を入力しても文字列として扱われるので
parseFloat()関数で数値に変換します。
因みに変換しないで結果をだすと文字列連結になります。// 12+23=1234
JavaScript:
function keisan(){
numA=document.getElementById("inA").value;
 numA=parseFloat(numA);
  numB=document.getElementById("inB").value;
   numB=parseFloat(numB);
 document.getElementById("inC").value=numA+numB;
   }
HTML:
<form name="fm">
<input size="15" type="text" id="inA" />+
<input size="15" type="text" id="inB" />
<input type="button" value="=" onclick="keisan()" />
<input size="15" type="text" id="inC" />
  </form>
javascriptで電卓も参考に どうぞ......
posted by javaScript at 23:26 | 大阪 ☁ | Javascript 構文 関数 ステートメント | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。