Fatal编程技术网
  • javascript/
  • 在JavaScript中将数组元素打印到它们各自的列中

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

javascript html

在JavaScript中将数组元素打印到它们各自的列中,javascript,html,html-table,createelement,Javascript,Html,Html Table,Createelement,我需要用JavaScript获取一个数组，并以类似表格的格式将其打印到屏幕上。我可以让列标题毫无问题地打印出来，但我正在努力让数据以类似表格的方式打印在这些列下 JavaScript文件（数据文件）： HTML文件： <!DOCTYPE html /> <html> <title>The Data Structure</title> <body> <script type="text/javascript" src="TheDa

我需要用JavaScript获取一个数组，并以类似表格的格式将其打印到屏幕上。我可以让列标题毫无问题地打印出来，但我正在努力让数据以类似表格的方式打印在这些列下

JavaScript文件（数据文件）：

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>


数据结构
函数printObj（对象）{
var theOutputTable=''；
var theoutheader=''；
//打印表的列标题。
for（对象中的列标题变量）{
var CreatetheTagTR=document.createElement（'th'）；
var theColumnText=document.createTextNode（列标题）；
创建tagtr.appendChild（列文本）；
document.body.appendChild（CreatetheTagTR）；
}
//最后，按行打印repsective列中的数据。
for（对象中的var属性）{
输出=对象[属性]；
var theElement=document.createElement（'tr'）；
var theText=document.createTextNode（输出）；
元素。追加子元素（文本）；
文件.正文.附件（元素）；
}   
}
printObj（个人信息）；
如果您重新排列数据，使其看起来像这样，那么打印值表会更容易

在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.
}
如果您重新排列数据，使其看起来像这样，您将更容易打印值表

在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.
}
如果您试图将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>"

var firstNames=['Marc'，'John'，'Drew'，'Ben']；
var lastNames=['Wilson'，'Smith'，'Martin'，'Wilcox']；
var htmlStr=“”；
对于（int i=0；i
在本例中，我创建了表的
tbody
，然后用两个数组的内容填充它。我已经将它划分为比需要更多的步骤，以便更容易看到正在发生的事情。一旦您了解了这里发生的事情，就可以将标题添加到此文件中，然后将其添加到DOM中。

如果您试图将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>"

var firstNames=['Marc'，'John'，'Drew'，'Ben']；
var lastNames=['Wilson'，'Smith'，'Martin'，'Wilcox']；
var htmlStr=“”；
对于（int i=0；i
在本例中，我创建了表的
tbody
，然后用两个数组的内容填充它。我已经将它划分为比需要更多的步骤，以便更容易看到正在发生的事情。一旦您了解了这里发生的事情，您就可以将标题添加到此中，然后将其添加到DOM中。

我将执行类似以下操作：

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
插入它。请参阅。

我会做一些更像：

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
插入它。请参阅。

是否真的要将表行附加到文档正文而不是表？只需假设最坏的情况。我应该在其他地方做吗？看起来行数据嵌套在标题中。首先创建一个表。然后是一排。用文本数据填充表格单元格。文本不会直接进入行元素。您仍然没有创建
元素来向其中添加行、标题单元格和数据单元格。（就像@Jeffman所说的：D）您真的要将表行附加到文档体而不是表中吗？假设最坏的情况。我应该在其他地方做吗？看起来行数据嵌套在标题中。首先创建一个表。然后是一排。用文本数据填充表格单元格。文本不会直接进入行元素。您仍然没有创建
元素来向其中添加行、标题单元格和数据单元格。（就像@Jeffman说的：D）