iT邦幫忙

2

(已解決)分割已經在陣列裡的字串,然後輸出成表格

我有一個長的很醜的陣列

var array = ["H99994;0000;0000;OFF;8;-37;845c_3ac4;-36"
,"A00001;0000;0001;OFF;8;;845c_3ac4;SIM","C00001;0000;0000;OFF;8;-38;845c_3ac4;-36"];

我想把它給拆出來,以每個;為分界放入表格中。
變成這樣

<table>
<tbody>
<tr>
<td>H99994</td>
<td>0000</td>
<td>0000</td>
<td>OFF</td>
<td>8</td>
<td>-37</td>
<td>845c_3ac4</td>
<td>-36</td>
</tr>
<tr>
<td>A00001</td>
<td>0000</td>
<td>0001</td>
<td>OFF</td>
<td>8</td>
<td></td>
<td>845c_3ac4</td>
<td>SIM</td>
</tr>
</tbody>
</table>

我目前是想到先把陣列全部加在一起變成字串,然後用slice()去切,但感覺好像不太對....

3
dragonH
iT邦超人 5 級 ‧ 2020-03-04 10:19:58
最佳解答

我目前是想到先把陣列全部加在一起變成字串,然後用slice()去切,但感覺好像不太對

沒辦法

如果你的資料就長這樣

只能這麼做

而且應該是用 split

或者你直接跑 loop 在個別切

codepen

cfu820522 iT邦新手 5 級 ‧ 2020-03-04 10:45:53 檢舉

謝謝你,我覺得我已經讓JS的split/slice弄得快起笑了

3
海綿寶寶
iT邦大神 1 級 ‧ 2020-03-04 10:35:34

沒用 split 也沒用 slice
直接 replace 了事

var array = ["H99994;0000;0000;OFF;8;-37;845c_3ac4;-36"
,"A00001;0000;0001;OFF;8;;845c_3ac4;SIM","C00001;0000;0000;OFF;8;-38;845c_3ac4;-36"];

var str;

str = "<table>\n<tbody>\n";
for (let i=0; i<array.length; i++) {
   str += "<tr>\n<td>" + array[i].replace(/;/g,"</td>\n<td>") + "</td>\n</tr>\n";
}
str += "</tbody>\n</table>\n";

alert(str);
cfu820522 iT邦新手 5 級 ‧ 2020-03-04 10:46:57 檢舉

原來還有這樣的作法,初學者如我只能想到硬用函式去套QQ

2
froce
iT邦大師 1 級 ‧ 2020-03-04 10:59:48
var array = ["H99994;0000;0000;OFF;8;-37;845c_3ac4;-36"
,"A00001;0000;0001;OFF;8;;845c_3ac4;SIM","C00001;0000;0000;OFF;8;-38;845c_3ac4;-36"];

let table = document.createElement("table")
let trs = array.map(tr => tr.split(";").map(td => `<td>${td}</td>`)).map(tr => `<tr>${tr.join("")}</tr>`).join("")
table.innerHTML = trs
document.body.appendChild(table)

https://jsbin.com/dejayofoka/1/edit?html,js,output

2
listennn08
iT邦高手 9 級 ‧ 2020-03-04 11:37:35

這樣做好像更複雜XD

var array = ["H99994;0000;0000;OFF;8;-37;845c_3ac4;-36"
,"A00001;0000;0001;OFF;8;;845c_3ac4;SIM","C00001;0000;0000;OFF;8;-38;845c_3ac4;-36"];

const replacer = (m, g1, g2, g3, g4, g5, g6, g7, g8) => {
  return `<tr><td>${g1}</td><td>${g2}</td><td>${g3}</td><td>${g4}</td><td>${g5}</td><td>${g6}</td><td>${g7}</td><td>${g8}</td></tr>`
}

document.body.innerHTML = `<table><tbody>${array.map( el => 
  el.replace(/(.*);(.*);(.*);(.*);(.*);(.*);(.*);(.*)/, replacer)
).join('')}</tbody></table>`

我要發表回答

立即登入回答