(已解決)分割已經在陣列裡的字串，然後輸出成表格 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2

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

javascript table array

cfu820522 2020-03-04 10:17:41 ‧ 3071 瀏覽

分享至

我有一個長的很醜的陣列

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()去切，但感覺好像不太對....

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

4 個回答

3

dragonH

iT邦超人 5 級 ‧ 2020-03-04 10:19:58

最佳解答

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

沒辦法

如果你的資料就長這樣

只能這麼做

而且應該是用 split

或者你直接跑 loop 在個別切

回應 1
分享
檢舉

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);

回應 1
分享
檢舉

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邦高手 5 級 ‧ 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>`

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙