0

我需要在 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>
4

3 回答 3

2

如果您重新排列数据使其看起来像这样，您将更容易打印值表...

在 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.
}
于 2013-08-12T23:38:07.940 回答
1

如果您尝试将 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。

于 2013-08-12T23:50:44.513 回答
0

I would do something more like:

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

This Constructor creates a table with your First and Last Names, and more, and returns it as a string. You can use .innerHTML to insert it. See the Fiddle.

于 2013-08-13T00:44:07.417 回答