HOME　SITE　　　　　　初心者による javascript 工事中　　一部つる植物検索システムに使用 スクロールなし（全51行）
36行
45行 全画面表示 F11		  左は 100% 表示の場合

画面解像度で異なる。
　hen　 ：「hen」は「変数」、「hen1」は「変数1」 　namae：「id名」 　tablename：「テーブル名」
　tei　　：「定数」 　gyouban　：「行番号」 　retuban　 ：「列番号」
0    s2-0s スクリプトの位置   
1 　 s2-1s

s2-1s2
 セルの値を取得 id名 から var hen = document.getElementById("namae").innerHTML;
行番号・
列番号から		 var hen1 = document.getElementById("tablename");
var hen2 = hen1.rows[gyouban].cells[retuban].innerHTML;
2 　 セルに表示 id名 に document.getElementById("namae").innerHTML = (hen) or "tei";
行番号・
列番号に		 var hen1 = document.getElementById("tablename");
hen1.rows[gyouban].cells[retuban].innerHTML = (hen) or "tei";
3 innerHTML「文字属性の全て、色・文字サイズなどを含む」 と
innerText「テキストのみ、比較に使用する場合は必須」
ok s2-3s テーブル１のセルの値を

テーブル２のセルに表示		 var hen1 = document.getElementById("tablename1");
var hen2 = document.getElementById("tablename2");
var hen3 = hen1.rows[gyouban1].cells[retuban1].innerHTML;
hen2.rows[gyouban2].cells[retuban2].innerHTML = (hen3);
4 未 s2-4s セルに id を設定 var hen = document.getElementById("tablename");
hen.rows[gyouban].cells[retuban].id = "idname";
5 　 　 　 　
6 　 　 セルに移動 location.href = "namae";
7 　 　 セルの文字の色を設定
（赤色の場合）　		 document.getElementById("namae").style.color = "red";
8 未 s2-8s セルの背景色を 取得 　
書き込み 　
9 ok s2-9s 行数取得 var hen = (tablename.rows.length)
var hen1 = document.getElementById("tablename");
var hen2 = hen1.rows.length;
10 　 　 ループ for (var hen = 値１ ; hen <= 値２ ; hen++) {
} 　　hen++ は hen+1 と同じ
11 　 　 if 文 　
12 ok s2-12s 行の

追加

削除		 行を追加 var hen1 = document.getElementById("tablename");
var hen2 = hen1.insertRow(gyouban); // gyouban=(-1)は最終行
セルを追加 var hen3 = hen2.insertCell(retuban); // retuban=(0) １列目のセル
var hen3 = hen2.insertCell(retuban); // retuban=(1) ２列目のセル
行を削除 var hen1 = document.getElementById("tablename");
hen1.deleteRow(gyouban); // gyouban=(-1)は最終行 () も同じ
13 ok s2-13s 処理中の表示 setTimeout関数による擬似的な並列処理
javascript - ページはいつ再描画されるか
for文をsetTimeoutに変換する
14 　 s2-14s ローカル変数
グローバル変数		 var hen = ***　hen = ***　関数外と関数内で異なる　関数：function
15 ok s2-15s CSS 切り替

スクロール
高さの例

このページ
の例

全画面表示の切り替え
はブラウザにより異なる
使用しない
方が無難
 ラジオボタン <input type="radio" name="dummy" onclick="hg0();">
スクロールなし<BR>　　 name の用途は？
HEAD <style type="text/css">
<!--　　<!-- 〜 --> はCSS 未対応のブラウザの回避　コメントは /* 〜 */
div.box0 { }
div.box1 {OVERFLOW-Y: scroll; WIDTH: 1335px;
HEIGHT: 540px;}
div.box2 {OVERFLOW-Y: scroll; WIDTH: 1335px;
HEIGHT: 675px;}
-->
</style>
BODY <DIV id="box" class="box0"> // 初期
<TABLE border="1" cellspacing="0">
</TABLE>
</DIV>
SCRIPT <SCRIPT>
　function hg0(){
　　document.getElementById("box").className = "box0";
　}
　function hg1(){
　　document.getElementById("box").className = "box1";
　}
　function hg2(){
　　document.getElementById("box").className = "box2";
　}
</SCRIPT>
16   s2-16s セル幅取得　設定  セル幅取得 ： getComputedStyle 下記 s2-17s 参照
17   s2-17s セル幅取得　設定
　スクロール 		 getComputedStyle IE では、
getComputedStyle という関数は存在しない？。
18 s2-18s 行逆順表示 セル内の水平位置
　取得・代入		 var tbl= document.getElementById("table1");
var a = tbl.rows[1].cells[0].align;
tbl.rows[1].cells[1].align = a
19 s2-19s テーブル入力・計算
20 s2-20s 計算　文字 → 数値 変換 Number()
21 s2-21s テーブル内の指定の行に
スクロール
s2-21s-new
22 s2-22s 表幅　取得
23 s2-23s セル幅・高さ　取得・設定
24 s2-24s 「文字のサイズ」を取得・表示
 25     スクリプトとCSSの
外部ファイル化 		  
26 s2-26s 別窓に表示
jQuery DataTables テーブル　ソート・検索
moment 時刻表示
保留 pan & zoom のデモ
28 s2-28s フレームページ
29 s2-29s-f フレームへのリンク
33 s2-30s グラフ描画・枠線色付け