javascriptのテーブルに配列を表示

Question

私の目標は、配列をとり、各要素をテーブルに表示することです。私の問題は、私が何かを逃していると感じることです。それは、私の2ヶ月目です。誰にでもアイデアがありますか？

var names = ["Ling, Mai","Johnson, Jim", "Zarnecki, Sabrina", "Jones, Chris","Jones, Aaron", "Swift, Geoffrey", "Xiong, Fong"]; 
    console.log(names.length);// display array length 
    console.log(names);//display array 



//onclick() show array in table 
//src w3schools 
function display() { 

//----------------------------------------------------- 
//src w3schools 

    var x = document.createElement("TABLE"); 
    x.setAttribute("id", "myTable"); 
    document.body.appendChild(x); 

    var y = document.createElement("TR"); 
    y.setAttribute("id", "myTr"); 
    document.getElementById("myTable").appendChild(y); 
//------------------------------------------------------- 

// //split up display to output each item in array in its own box  
//  // https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript 
    var index, len; 
//  // var a = ["a", "b", "c"]; 
    for (index = 0, len = names.length; index < len; ++index) { 

     console.log(names[index]); 

     var t = document.createTextNode(names[index]); 
     z.appendChild(t); 
    } 

    var t = document.createTextNode("meow"); 

    document.getElementById("myTr").appendChild(z); 
    console.log(z); 

}ディスプレイの//エンド（）

Answer 1

これはあなたのために動作します。 document.createElementからtdを作成し、それにdocument.createTextNodeを追加します。また、tr inループを作成し、trにtdを追加します。ここでいくつかの例を見てください。

Create table using Javascript

var names = ["Ling, Mai", "Johnson, Jim", "Zarnecki, Sabrina", "Jones, Chris", "Jones, Aaron", "Swift, Geoffrey", "Xiong, Fong"]; 
 
console.log(names.length); // display array length 
 
console.log(names); //display array 
 

 
//onclick() show array in table 
 
//src w3schools 
 
function display() { 
 

 
    //----------------------------------------------------- 
 
    //src w3schools 
 

 
    var x = document.createElement("TABLE"); 
 
    x.setAttribute("id", "myTable"); 
 
    x.setAttribute("border", "1"); 
 
    document.body.appendChild(x); 
 

 

 
    //------------------------------------------------------- 
 

 
    // //split up display to output each item in array in its own box  
 
    //  // https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript 
 
    var index, len; 
 
    //  // var a = ["a", "b", "c"]; 
 
    for (index = 0, len = names.length; index < len; ++index) { 
 
    var y = document.createElement("TR"); 
 
    y.setAttribute("id", "myTr"); 
 
    document.getElementById("myTable").appendChild(y); 
 
    console.log(names[index]); 
 

 
    var t = document.createElement("TD"); 
 
    t.appendChild(document.createTextNode(names[index])); 
 
    y.appendChild(t); 
 
    } 
 

 

 
} 
 
display();

Answer 2

あなたの受け入れ答えのいくつかのコメント：

1. ID属性が各要素に一意である必要があります。だからこそIDと呼ばれています。このコードは同じIDを持つN個のtrを生成します。
2. 変数indexおよびlenは、無作為化のためのグローバルスコープ内に作成されます。
3. index = 0, len = names.length; index < len;は、index = 0; index < names.lengthと等しい。新しい変数lenの作成を保存します。
4. for(...;...;...)ではなく、for...inまたはfor...ofを使用して配列要素を反復処理するのがベストプラクティスです。
5. もう1つのベストプラクティスは、定数変数にconst、ローカルスコープ変数にletを使用することです。

比較のために以下のコードを見てください。

var names = ["Ling, Mai","Johnson, Jim", "Zarnecki, Sabrina", "Jones, Chris","Jones, Aaron", "Swift, Geoffrey", "Xiong, Fong"]; 
 
function display() { 
 
    // Create the table 
 
    var x = document.createElement("TABLE"); 
 
    x.setAttribute("id", "myTable"); 
 
    document.body.appendChild(x); 
 

 
    for(name of names) { 
 
     // Create a unique TR id 
 
     const thisTrId = String("myTr"+names.indexOf(name)); 
 

 
     // Create the TR and append to the table 
 
     let y = document.createElement("TR"); 
 
     y.setAttribute("id", thisTrId); 
 
     document.getElementById("myTable").appendChild(y);  
 
     
 
     // Create the TD and append to the above TR 
 
     let t = document.createElement("TD"); 
 
     t.appendChild(document.createTextNode(name)); 
 
     y.appendChild(t); 
 
    } 
 
} 
 
display();

#myTable td { 
 
    border: 1px solid black; 
 
}

Answer 3

何をしようとしていますか？このような何か：

//<![CDATA[ 
 
// external.js 
 
var pre = onload, doc, bod, C, E; // for use on other loads 
 
onload = function(){ 
 
if(pre)pre(); // change var name for other loads 
 

 
doc = document; bod = doc.body; 
 
C = function(tag){ 
 
    return doc.createElement(tag); 
 
} 
 
E = function(id){ 
 
    return doc.getElementById(id); 
 
} 
 
var names = ['Ling, Mai', 'Johnson, Jim', 'Zarnecki, Sabrina', 'Jones, Chris', 'Jones, Aaron', 'Swift, Geoffrey', 'Xiong, Fong']; 
 
var people = E('people'); 
 
for(var i=0,nm,row,fn,ln,l=names.length; i<l; i++){ 
 
    nm = names[i].split(/,\s+/); row = C('tr'); fn = C('td'); ln = C('td'); 
 
    fn.innerHTML = nm[1]; ln.innerHTML = nm[0]; row.appendChild(fn); row.appendChild(ln); 
 
    people.appendChild(row); 
 
} 
 

 
} 
 
//]]>

/* external.css */ 
 
html,body{ 
 
    margin:0; padding:0; 
 
} 
 
.main{ 
 
    width:960px; background:#000; color:#fff; padding:20px; margin:0 auto; 
 
} 
 
table{ 
 
    border-collapse:collapse; width:400px; 
 
} 
 
td{ 
 
    border:1px solid #fff; padding-left:5px; 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <meta name='viewport' content='width=device-width' /> 
 
    <title>Lame Table</title> 
 
    <link type='text/css' rel='stylesheet' href='external.css' /> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
<body> 
 
    <div class='main'> 
 
    <table><thead><tr><th>First Name</th><th>Last Name</th></tr></thead><tbody id='people'></tbody></table> 
 
    </div> 
 
</body> 
 
</html>