<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サンプル | JSONからHTMLテーブルを生成する</title> <script src="../../style2/js/jquery-1.11.1.min.js"></script> <script src="JsonToTable.js"></script> <script> function test1(){ //JSON文字列を取得 var str_json=$("#json1").html(); //列オプションの設定 var clmOptions={ 'name1':{'name':'名前１'}, 'dummy':{'visible':false}, 'name2':{'name':'名前２','sanitaize':true}, 'value1':{'name':'値１','mapping':{0:'ネコ',1:'ネズミ',2:'ウシ',3:'トラ'}}, 'value2':{'name':'金額（円）','currency':'jpy'}, 'value3':{'name':'容量','byte_size':true}, }; //テーブル要素の属性オプション var attributes={'id':'tbl1', 'border':1, }; var jsonToTable=new JsonToTable();// JSONからHTMLテーブル生成 jsonToTable.create('#res1',str_json,clmOptions,attributes); } </script> </head> <body> <h2>サンプル | JSONからHTMLテーブルを生成する</h2> <strong>JSON文字列</strong>(テーブルのデータ) <div id="json1"> [{"id":"1","name1":"テストA1","name2":"テストB1","dummy":"ダミー1","value1":"1","value2":"","value3":"","value4":"","date1":"2012/12/12","datetime1":"2012/12/12 12:12:12"}, {"id":"2","name1":"\u003Cspan style='color:red'\u003Eテスト\u003C/span\u003EA2","name2":"\u003Cspan style='color:red'\u003Eテスト\u003C/span\u003EB2","dummy":"ダミー2","value1":"2","value2":"1000","value3":"123456789","value4":"0","date1":"2012/12/13","datetime1":"2012/12/12 12:12:12"}, {"id":"3","name1":"テストA3","name2":"テストB3","dummy":"ダミー3","value1":"3","value2":"10,000.12","value3":"123456","value4":"1","date1":"dummy","datetime1":"dummy"}, {"id":"4","name1":"テストA4","name2":"テストB4","dummy":"ダミー4","value1":"4","value2":"1000000","value3":"99000000000","value4":"2","date1":"2012/12/15","datetime1":"2012/12/12 12:12:12"}] </div> <hr> <input type="button" value="テーブル作成" onclick="test1()" class="btn btn-success" /> <div id="res1" ></div> </body> </html>
| 引数 | 名称 | 説明 |
|---|---|---|
| table_selector | 要素名 |
HTMLテーブルの出力場所をセレクタ名で指定する。 例："#sample_tbl" |
| str_json | JSON文字列 | テーブルのデータ元であるJSON文字列を指定する。 |
| clmOptions | 列オプション |
列に関する細かなオプションを設定する。 詳しくは下記の「列オプションの設定」に記載。 |
| attributes | テーブル要素の属性オプション | 生成テーブルタグの属性を指定する。 例 attributesの値→ {'id':'test1', 'class':'style_a', }; ↓生成↓ テーブルタグ → <table id="test1" class="style_a" > |
| プロパティ | 説明 |
|---|---|
| name |
列名を指定する。 省略するとキーが表示される。 例→'名前１' |
| sanitaize |
trueにするとXSSサニタイズする。 次の4つの記号「< > " '」をサニタイズする。 省略時はfalse扱い。 |
| mapping |
値に紐づく文字を表示する。 以下のように設定する。 {0:'ネコ',1:'ネズミ',2:'ウシ',3:'トラ'} 値が2である場合、表では「ウシ」と表示される。 |
| currency |
jpyを指定すると3桁区切りの金額表記になる。 1234→¥1,234 現在は日本円のみ対応 |
| byte_size |
バイト容量の表示 数値の大きさによって、次の単位「byte,KB,MB,GB」が自動的に切り替わる。 |
| checkbox |
チェックボックスで表示する。 値には属性オブジェクトを指定する。 例 設定値→'checkbox':{'name':'xxx_name','class':'xxx2'} HTML→<input type='checkbox' name='xxx_name' class='xxx2' /> |
/**
* 日付チェック
*
* @note
* yyyy/mm/dd形式とyyyy-mm-dd形式に対応
* 閏年に対応
* 空値ならfalseを返す。
*
* @param value
* @returns true:入力OK false:入力エラー
*/
_isDate(value){
var ary=value.split("/");
if(ary.length != 3){
ary=value.split("-");
if(ary.length != 3){
return false;;
}
}
let y = ary[0];
let m = ary[1];
let d = ary[2];
let regexp = /^[0-9]*$/;
if(!regexp.test(y)) return false;
if(!regexp.test(m)) return false;
if(!regexp.test(d)) return false;
var dt=new Date(y,m-1,d);
if(dt.getFullYear()!=y || dt.getMonth()!=m-1 || dt.getDate()!=d){
return false;
}
return true;
}
/**
* 年月チェック
* yyyy/mm形式とyyyy-mm形式に対応
* ※注意 onchangeイベントと全角入力では正しく検知できない。
* @param value 年月
* @returns true:入力OK false:入力エラー
*/
function isYM(value){
var ary=value.split("/");
if(ary.length != 2){
ary=value.split("-");
if(ary.length != 2){
return false;;
}
}
let y = ary[0];
let m = ary[1];
let regexp = /^[0-9]*$/;
if(!regexp.test(y)) return false;
if(!regexp.test(m)) return false;
var dt=new Date(y,m-1,1);
if(dt.getFullYear()!=y || dt.getMonth()!=m-1 ){
return false;
}
return true;
}
<html lang="ja"> <head> <meta charset="utf-8"> <script src="jquery-1.11.1.min.js"></script> <script src="cpick.js"></script> </head> <body> <input type="text" name="c1" value="#ff5100" size="12" id="t1" class="html5jp-cpick" /> <input type="text" name="c2" value="#00ff1b" size="12" id="t2" class="html5jp-cpick" /> </body> </html>cpick.jsのダウンロード先
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script>
var m_index=0;
var m_handlers=new Array();//setIntervalのハンドラリスト。スレッド停止に使用。
//setIntervalによるスレッドを開始する。
function start(){
var h=setInterval("thread()",100);//スレッド開始。スレッドにする関数と間隔（ミリ秒）を指定する。
m_handlers.push(h);//ハンドラをリストに追加
}
//スレッド。定期的に呼び出される関数
function thread(){
m_index++;
$('#res').html(m_index);
}
//スレッドを停止する。
function stop(){
for(var i=0;i<m_handlers.length;i++){
var h=m_handlers[i];//ハンドラを指定してスレッドを停止する。
clearInterval(h);
}
}
</script>
</head>
<body>
<input type="button" value="start" onclick="start()" />
<input type="button" value="stop" onclick="stop()" />
→<span id="res"></span><br>
</body>
</html>
サンプル
他のスレッド関数について
class Catdog{
/**
* スレッドを開始する
*/
_startThread(){
this.handlers = []; // スレッドのハンドラーリスト
this.main_index = 0;
var h = setInterval(()=>{this.thread();}, 300); // スレッド開始。スレッドにする関数と間隔（ミリ秒）を指定する。
this.handlers.push(h); // ハンドラをリストに追加
}
/**
* スレッド | 定期的に呼び出される関数
*/
thread(){
this.main_index ++;
console.log(this.main_index);
}
/**
* スレッドを停止する。
*/
stopThread(){
for(var i in this.handlers){
var h = this.handlers[i];
clearInterval(h); // スレッド停止
}
}
}
function test(){
var v=$('#xxx').val();
if(isRange(v,-9,20,true)==false){
alert('-9～20で入力してください。必須です。');
}
}
//数値範囲入力チェックのバリデーション
function isRange(v,range1,range2,req){
//必須入力チェック
if(req==true){
if(v == null || v === '' || v === false){
return false;
}
}
//数値チェックをする。
if(isNaN(v)){
return false;
}
//数値範囲チェックをする。
if(range1 <= v && range2 >= v){
return true;
}else{
return false;
}
}
サンプル
//現在日時を取得 var nowDt=new Date().toLocaleString(); //本日を取得 var today=new Date().toLocaleDateString(); //現在時刻を取得 var nowTime=new Date().toLocaleTimeString();参照
UNIXタイムスタンプに変換
var d = new Date(); var u = Math.floor(d);// UNIXタイムスタンプに変換
UNIXタイムスタンプからDateに変換
var d = new Date(u); // UNIXタイムスタンプからDateに変換
jQuery版
var u2 = Math.floor($.now() / 1000);
var str="大きなnekoと小さなneko";
var s1=str.replace('neko','猫');
//出力→ s1=大きな猫と小さなneko
var str="大きなnekoと小さなneko"; var s2=str.replace(/neko/g,'猫'); //出力→ s2=大きな猫と小さな猫
var str="大きなneko1と小さなneko2";
var i=1;
var regexp = new RegExp('neko' + i , 'g');
var s3=str.replace(regexp,'猫');
//出力→ s3=大きな猫とneko2
参照
<;html lang="ja">;
<;head>;
<;meta charset="utf-8">;
<;link rel="stylesheet" type="text/css" href="test_a.css" id="css_x">;
<;script>;
function test_a(){
document.getElementById('css_x').href = 'test_a.css';
}
function test_b(){
document.getElementById('css_x').href = 'test_b.css';
}
<;/script>;
<;/head>;
<;body>;
<;div id="neko">;吾輩は猫である<;/div>;
<;input type="button" value="CSS A" onclick="test_a()" />;
<;input type="button" value="CSS B" onclick="test_b()" />;
<;/body>;
<;/html>;
#neko{
color:red;
}
#neko{
color:blue;
}
サンプル
/**
* 文字数チェックのバリデーション
* @param v 対象文字列
* @param maxLen 制限文字数
* @param req trueは必須入力。0と半角SPは入力ありとみなす。引数省略時はfalse
* @return true:正常 false:異常
*/
function isMaxLength(v,maxLen,req){
//必須入力チェック
if(req==true){
if(v == null || v === '' || v === false){
return false;
}
}
//最大文字数チェックをする。
var n=v.length;
if (n > maxLen){
return false;
}
return true;
}