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 in循环并将td添加到tr。在这里查看更多示例。

Create table using Javascript

＆＃13;

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

＆＃13;

Answer 2

对您接受的答案的一些评论：

ID属性对每个元素都应该是唯一的。这就是为什么它被称为和ID。此代码生成具有相同ID的N个tr个。
变量index和len在全局范围内创建，不存在任何清除。
index = 0, len = names.length; index < len;等于index = 0; index < names.length。保存您创建len。
截至目前，最佳做法是使用for...in或for...of而不是for(...;...;...)来迭代数组元素。
另一个最佳做法是将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>

在javascript中显示表中的数组

3 个答案: