Javascriptで配列のデータからTableを作る方法を教えてください! var data =["A","11","B","22","C","44]; これを 添付画像のようにしたいです。

画像

JavaScript | HTML、CSS44閲覧xmlns="http://www.w3.org/2000/svg">25

ベストアンサー

0

ThanksImg質問者からのお礼コメント

本当にありがとうございました!m(_ _)m

お礼日時:6/15 21:15

その他の回答(2件)

1

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>配列から表の作成</title> <style> table { border-collapse: collapse; } td,th { width: 100px; height: 20px; border: solid 1px; } </style> </head> <body> <table id="tbl"></table> <script> var data = ["A", "11", "B", "22", "C", "44"]; var tbl = document.querySelector('#tbl'); var tblHeader = document.createElement('tr'); tblHeader.innerHTML = "<th>名前</th><th>スコア</th>"; tbl.appendChild(tblHeader); var cells = 2; var rows = data.length / cells; for (var i = 0; i < rows; i++) { var row = tbl.insertRow(-1); for (var j = 0; j < cells; j++) { var cell = row.insertCell(-1); var num = data[i * cells + j]; cell.textContent = num; } } </script> </body> </html>

1人がナイス!しています

0

aki********さん >・・・配列のデータからTableを作る・・・・・・ ご参考に↓ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> table{ border-collapse: collapse; border: 1px solid gray; } table td{ border: 1px solid gray; padding:4px; } </style> </head> <body> <div id="table"></div> <script> function makeTable(data, tableId){ var rows=[]; var table = document.createElement("table"); // 表に2次元配列の要素を格納 for(i = 0; i < data.length; i++){ rows.push( table.insertRow(-1) ); // 行の追加 for(j = 0; j < data[0].length; j++){ cell = rows[i].insertCell(-1); cell.appendChild( document.createTextNode( data[i][j] ) ); } } // 指定したdiv要素に表を加える document.getElementById(tableId).appendChild(table); } window.onload = function(){ var data =[["名前","スコア"],["A","11"],["B","22"],["C","44"]]; // 表の動的作成 makeTable( data,"table" ); }; </script> </body> </html>

ありがとうございます。 配列がすでに出来ていて、形がちょっと違うのですが、どのように修正したらいいのでしょうか?? 交互に並んでいます。↓ var data =["A","11","B","22","C","44];