配列からテーブルを作る２
配列からテーブルを作る場合、セルを結合したりclassName を指定したい時がある。そこで配列のセルに該当するテキストから colSpan , rowSpan などを取り出せるようにした。
- 文字列の先頭が "#" ならば TH 要素になる
- ”!r4c2 def" ならば rowSpan=4, colspan=2, textContent = "def" となる
- "!{"className":"red"} ghi ならば class="red", textContent = "ghi" となる。 { } で囲まれる部分は、JSON 形式に変換されるのでダブルクォーテーションを適材適所に使用すること。また {"innerHTML":"<a href='xxx'>Test</a>"}とすれば子要素以降も文字列から生成できる。その場合は適切に文字をエスケープすること。
let ary = [
["#!r4{"className":"red"} abc", "#!c4 def, ... ],
[...],
...
]function ary2thead (ary = [ ], thead = document.createElement ('thead')) {
for (let row of ary)
thead.insertRow().append(...row.map(cell=>{
let [, th, rowSpan, colSpan, json, textContent = ''] = (new RegExp ('^(#)?(?:!(?=[rc\\{])(?:r([2-9]|[1-9]\\d+)|r[01]|r0\\d+)?(?:c([2-9]|[1-9]\\d+)|c[01]|c0\\d+)?({.+})?)?\\s*(.*)\\s*$','g')).exec (cell) ?? [ ];
return Object.assign (document.createElement (th ? 'th': 'td'), Object.entries ({rowSpan, colSpan, textContent}).reduce((a,[b,c])=>((c===undefined||(a[b]=c)),a), {}), json ? JSON.parse(json): {});
}));
return thead;
}短く
const
ary2thead= (a=[],b=document.createElement('thead'))=>{
for(let c of a)b.insertRow().append(...c.map(d=>{
let[,e,f,g,h,i='']=(new RegExp('^(#)?(?:!(?=[rc\\{])(?:r([2-9]|[1-9]\\d+)|r[01]|r0\\d+)?(?:c([2-9]|[1-9]\\d+)|c[01]|c0\\d+)?({.+})?)?\\s*(.*)\\s*$','g')).exec(d)??[];
return Object.assign(document.createElement(e?'th':'td'),Object.entries({rowSpan:f,colSpan:g,textContent:i}).reduce((j,[k,l])=>((l===undefined||(j[k]=l)),j),{}),h?JSON.parse(h):{});
}));return b};
