在javascript中顯示數組表格中的數組

Question

我的目標是獲取一個數組並顯示錶中的每個元素。我的問題是我覺得我錯過了這是我第二個月的js。任何人有想法？

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並將td添加到tr。在這裏看到更多的例子。

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...in或for...of而不是for(...;...;...)遍歷數組元素。
5. 另一個最佳做法是對常量變量使用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>