Question

我需要在JavaScript中使用数组并以类似表的格式将其打印到屏幕上。我可以毫无问题地打印列标题，但我正在努力解决的问题是将数据打印在表格中的那些列之下....

JavaScript文件（数据文件）：

var FirstNames = new Array();
var LastNames = new Array();

 FirstNames[0] = 'First1';
 FirstNames[1] = 'First2';
 FirstNames[2] = 'First3';
 FirstNames[3] = 'First4';

 LastNames[0] = 'Last1';
 LastNames[1] = 'Last2';
 LastNames[2] = 'Last3';
 LastNames[3] = 'Last4';

var PersonalInformation = {

   FirstName : FirstNames,
   LastName : LastNames

};

HTML文件：

<!DOCTYPE html />
<html>
<title>The Data Structure</title>
<body>

<script type="text/javascript" src="TheData.js"></script>
<script>
    function printObj(theObject){
        var theOutputTable = '';
        var theOutputHeader = '';

        //Print the Column Headers for the table.
        for (var theColumnHeaders in theObject){
            var CreatetheTagTR = document.createElement('th');
            var theColumnText = document.createTextNode(theColumnHeaders);
            CreatetheTagTR.appendChild(theColumnText);
            document.body.appendChild(CreatetheTagTR);
        }

        //Eventually, print data in the repsective columns by row.
        for (var property in theObject){
            theOutput = theObject[property];
            var theElement = document.createElement('tr');
            var theText = document.createTextNode(theOutput);
            theElement.appendChild(theText);
            document.body.appendChild(theElement);
        }   
    }
    printObj(PersonalInformation);
</script>
</body>
</html>

Answer 1

如果您重新排列数据，这样就可以更轻松地打印价值表...

在javascript中：

//structure the array this way
var names = [
    { first: 'john', last: 'smith' },
    { first: 'frank', last: 'ricard' }
    { first: 'jimi', last: 'hendrix' }
];


//Then, you can simply iterate through the array and build a table.
for(var i = 0; names.length; i++) {
    var name = names[i];
    var first = name.first
    var last = name.last

    //build your table markup in here.
}

或在php中：

//structure array this way
$names = array(
    array('first' => 'john', 'last'=>'smith'),
    array('first' => 'frank', 'last'=>'ricard'),
    array('first' => 'jimi', 'last'=>'hendrix')
);

//iterate through array this way
foreach($names as $name) {
    $first = $name['first'];
    $last = $name['last'];
    //build your table markup in here.
}

Answer 2

如果您尝试将JavaScript数组的内容作为表打印到DOM中，请查看以下示例。

var firstNames = ['Marc', 'John', 'Drew', 'Ben'];
var lastNames = ['Wilson', 'Smith', 'Martin', 'Wilcox'];

var htmlStr = "<tbody>";
for(int i=0; i < firstNames.length; ++i) {
    htmlStr += "<tr>";
    htmlStr += "<td>" + firstNames[i] + "</td>";
    htmlStr += "<td>" + lastNames[i] + "</td>";
    htmlStr += "</tr>";
}
htmlStr += "</tbody>"

在这个例子中，我创建了表的tbody，然后用两个数组的内容填充它。我把它分成了比需要更多的步骤，以便更容易看到发生了什么。一旦你理解了这里发生了什么，你可以添加标题，然后将其添加到DOM。

Answer 3

我会做更多的事情：

var doc = document;
function E(e){
  return doc.getElementById(e);
}
function PersonalInformation(){
  function C(e){
    return doc.createElement(e);
  }
  this.FirstNameTableHead = 'First Name';
  this.LastNameTableHead = 'Last Name';
  this.FirstNames = ['Marc', 'John', 'Drew', 'Ben'];
  this.LastNames = ['Wilson', 'Smith', 'Martin', 'Wilcox'];
  this.addName = function(first, last){
    this.FirstNames.push(first);
    this.LastNames.push(last);
  }
  this.createTable = function(){
    var nd = C('div'), tbl = C('table'), tr1 = C('tr'), th1 = C('th'), th2 = C('th');
    var fnh = doc.createTextNode(this.FirstNameTableHead);
    var lnh = doc.createTextNode(this.LastNameTableHead);
    th1.appendChild(fnh); th2.appendChild(lnh); tr1.appendChild(th1);
    tr1.appendChild(th2); tbl.appendChild(tr1);
    var fn = this.FirstNames, ln = this.LastNames;
    for(var i in fn){
      var tr = C('tr'), td1 = C('td'), td2 = C('td');
      var tn1 = doc.createTextNode(fn[i]), tn2 = doc.createTextNode(ln[i]);
      td1.appendChild(tn1); td2.appendChild(tn2); tr.appendChild(td1);
      tr.appendChild(td2); tbl.appendChild(tr);
    }
    nd.appendChild(tbl);
    return nd.innerHTML;
  }
}
var PI = new PersonalInformation();
E('wherever').innerHTML = PI.createTable();

此构造函数使用您的名字和姓氏创建一个表，以及更多，并将其作为字符串返回。您可以使用.innerHTML插入它。请参阅Fiddle。

在JavaScript中将数组元素打印到各自的列中

3 个答案: