JS 動的な作表コード：普通じゃ物足りない？

質問

JavaScript 動的な作表コード：普通じゃ物足りない？

動的に作表するには、次のメソッドが使われています。
createElement, insertRow, insertCell

さて、これらを用いずに
作表するにはどんなコードになりますか？

下記のとおり、素材を用意しました。

<script>
//表の名称 (caption)
const title = "一般果物　エネルギー　上位１０";

//表の元データ (分割子は半角スペース)
const data = `
順位 果物名 含量 (Kcal)
1位 中国栗 207
2位 アボカド 178
3位 日本ゆで栗 152
4位 ドリアン 140
5位 バナナ 93
6位 あけび 89
7位 チェリモヤ 82
8位 アテモヤ 81
9位 ホワイトサポテ 73
10位 ぐみ 72`;
</script>

回答No.2

dell_OK · ベストアンサー

順位、果物名、含量がヘッダっぽいので変更しました。

var table = "<table><caption>" + title + "</caption>";
const row_datas = data.split("\n");
row_datas.shift();
const th_data = row_datas.shift();
table += "<tr><th>" + th_data.trim().replace(/ /g, "</th><th>") + "</th></tr>";
row_datas.forEach(row_data => {
table += "<tr><td>" + row_data.trim().replace(/ /g, "</td><td>") + "</td></tr>";
});
table += "</table>";
document.write(table);

お礼

ご回答ありがとうございます。

ここを
<table border=1>
に変更してセルを明確にしてみました。

document.write(table);
これだとBODY内1のコンテンツがかき消されてしまうので
ここを
insertAdjacentHTMLメソッドを使って確認しました。

回答No.1

dell_OK

こんなのはどうでしょうか。

<script>
//表の名称 (caption)
const title = "一般果物　エネルギー　上位１０";

//表の元データ (分割子は半角スペース)
const data = `
順位 果物名 含量 (Kcal)
1位 中国栗 207
2位 アボカド 178
3位 日本ゆで栗 152
4位 ドリアン 140
5位 バナナ 93
6位 あけび 89
7位 チェリモヤ 82
8位 アテモヤ 81
9位 ホワイトサポテ 73
10位 ぐみ 72`;

var table = "<table><caption>" + title + "</caption>";
const row_datas = data.split("\n");
row_datas.shift();
row_datas.forEach(row_data => {
table += "<tr><td>" + row_data.trim().replace(/ /g, "</td><td>") + "</td></tr>";
});
table += "</table>";
document.write(table);
</script>

お礼

ご回答ありがとうございます。