Json to HTML Table是擷取自afshinm的專案,目的是讓所有的Json物件可以輕易的在javascript中轉換成為Html Table的字串
當中也支援http(s)://, ftp://, file://, javascript:()等輸出的轉換,可以方便顯示json物件中的不同屬性文字...
原先開發nodeutil的目的在蒐集各種常用的套件,當中引用該模組作為Node.js中處理Json物件轉換成Html Table的功能
在撰寫Mail或是Render Web時候,可以派上用場...
用法:
var j2t = require('nodeutil').json2table;
app.get('/test', function(req, res){
var json = [
{Desc:'Sample of using javascript', Code:'javascript:(alert(\'TEST\'));'},
{Desc:'Sample of using http', Code:'http://www.google.tw'},
{Desc:'Sample of using https', Code:'https://www.google.tw'},
{Desc:'Sample of using ftp', Code:'ftp://www.ntu.edu.tw'}
];
res.end(
j2t.ConvertJsonToTable(
json,
'jsonTable',
'tbclass',
'<img src="http://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Push-Pin--Right-Azure.png"/>'
)
);
});
其中json物件的key部分會變成table title,並且以第一列的為主要顯示,其下有未填寫的部份會補上{0}
value的部份如有http(s)://, ftp://, file://, javascript:()等開頭的文字,將會自動轉變成link輸出
而主要轉換的function是ConvertJsonToTable((objectArray, tableId, tableClass, linkReplace)),帶入四個參數:
- objectArray: json array物件,主要輸出內容部分
- tableId: 將帶入到輸出的table id屬性
- tableClass: 將帶入到輸出的table class屬性
- linkReplace: 將帶入到所有被轉換成link的顯示文字(或物件)
輸出畫面:
輸出的HTML原始碼:
<table border="1" cellpadding="1" cellspacing="1" id="jsonTable" class="tbclass"><thead><tr><th>Desc</th><th>Code</th></tr></thead><tbody><tr><td>Sample of using javascript</td><td><a href="javascript:(alert('TEST'));"><img src="http://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Push-Pin--Right-Azure.png"/></a></td></tr><tr><td>Sample of using http</td><td><a href="http://www.google.tw"><img src="http://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Push-Pin--Right-Azure.png"/></a></td></tr><tr><td>Sample of using https</td><td><a href="https://www.google.tw"><img src="http://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Push-Pin--Right-Azure.png"/></a></td></tr><tr><td>Sample of using ftp</td><td><a href="ftp://www.ntu.edu.tw"><img src="http://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Push-Pin--Right-Azure.png"/></a></td></tr></tbody></table> | |