使用 DOM 将 javascript 数组转换为 HTML 表

Question

我目前正在使用潮汐 sdk 创建一个桌面应用程序。我所有的数据库信息都存储在 Parse.com（一个无服务器数据库）中。我要做的是获取我从 Parse 查询的信息数组（在 javascript 中）并将其插入到表中。我真的很难习惯在我的桌面应用程序中不使用 document.write()。

---

我希望最终结果看起来像：

---

这是我开始的：

var contactNameArray = [];
var contactNumberArray= [];
var CM = Parse.Object.extend("ContactMenu");
var queryContact = new Parse.Query(CM);
queryContact.ascending("ContactName");
queryContact.find({
  success: function(results4) {
    alert("Successfully retrieved " + results4.length + " entries.");
    // Do something with the returned Parse.Object values
// document.write('<table border="1" cellspacing="1" cellpadding="5">');
    for (var i = 0; i < results4.length; i++) {
      var object4 = results4[i];
      contactNameArray[i] = object4.get('ContactName');
      contactNumberArray[i] = object4.get('ContactNumber');
 // document.write("<tr><td>Number " + i + " is:</td>");
  //document.write("<td>" + contactNameArray[i] + "</td></tr>");

    }

//document.write('</table>');
  },
  error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
});

---

在做了一些研究后，我发现了来自http://www.w3schools.com/jsref/dom_obj_table.asp 的这段代码，它写道：屏幕左手角底部的正确响应。 （在我看来有点奇怪）。在代码中，我怎样才能更好地将这个表格定位在我的屏幕中心？有没有办法让这个表格在 javascript 中居中？

function generate_table() {
 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);
    var z = document.createElement("TD");

    for(var i = 0; i< query4.length; i++){

       var t = document.createTextNode(contactNameArray[i]);
       z.appendChild(t);
       var m = document.createTextNode(contactNumberArray[i]);
       z.appendChild(m);
    }
    document.getElementById("myTr").appendChild(z);
}

所以我已经想出了如何将我想要的信息放入一个数组中。我只是很难将这些信息放入正确定位的表格中。先感谢您。如果您需要查看更多我的代码，请告诉我。如果我不清楚，请让我知道我应该解释什么。谢谢！！！

Answer 1

通过阅读您的问题，我推断出以下内容......

1. 如何使用 javascript 使表格居中。

2. 我在将信息放入表格时遇到问题。

通常，在您的 javascript 中进行样式设置不是一个好主意。虽然在您的 jscript 中方便地处理这些事情看起来不错，但如果不适度使用它最终可能会破坏您的代码。您最好的选择是编写一些 css，也许是一个可以将元素居中到页面的通用类，然后将该类应用于表格元素。无需 Javascript，它使您的代码更易于启动！

这里是一个 hacky 的居中代码，它可以让我将注册表单 div 居中（高度和宽度可以随意调整，像素的使用不是必须的。）：

body > #register {
  margin: auto;
  position: absolute;
  text-align: center;
  height: 156px;
  width: 160px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

对于您在向表格中添加信息时遇到的问题，在不知道您看到什么错误或确切输出的情况下，我所能做的就是关闭我在代码中看到的内容。您的生成表函数有一些我注意到的区域....

该函数创建一个表，为其设置一个 id，并将其附加到文档中，然后创建一个新行，并为其设置一个 id，然后将新行附加到表中。然后创建一个单元格。

这是我发现问题的地方...

然后您跳转到一个受 query4 长度限制的 for 循环（我假设这是包含您的联系信息的查询）并创建文本节点，如果我不是，则每次迭代将它们附加到 z（单元格）错误地认为这实际上会导致第一行（也是唯一的）行中的单元格被您的所有查询信息炸毁。应该发生的是 for 循环在每次迭代时将名称和编号添加到其自己的新行中的单元格中。这将是您的伪代码...

• 创建表
• 开始循环遍历每个项目的联系信息...
  • 创建新行
  • 创建新单元格
  • 向各个单元格添加信息
  • 将单元格附加到行
  • 将行追加到表中
  • 冲洗并重复

根据您所拥有的，这是我建议的未经测试的粗略表示，我用您自己的代码构建了它，但实际上可以通过多种方式完成...

 function generate_table() {

    // Create our table
    var table = document.createElement("TABLE");
    document.body.appendChild(table);

    for(var i = 0; i < query4.length; i++) {
       // Set up an awesome new row.
       var row = document.createElement("TR");

       // Set up awesome new cells.
       var nameCell = document.createElement("TD");
       var numberCell = document.createElement("TD");

       // Instantiate variables to hold our data.
       var name = document.createTextNode(contactNameArray[i]);
       var number = document.createTextNode(contactNumberArray[i]);

       // Add values to cells
       nameCell.appendChild(name);
       numberCell.appendChild(number);

       // Add cells to row.
       row.appendChild(name);
       row.appendChild(number);

       // Build out awesome row.
       table.appendChild(row);
    }
}

我在这里做了几件事，首先是一些变量重命名，描述性变量名称为以后的代码可读性和维护创造了奇迹。 （查看“清洁代码”一书，它详细讨论了这一点，它几乎在一夜之间改变了我看待代码的方式。）

另外一件事，我假设 query4 变量是在全局范围内设置的，这会起作用，但如果可以的话，尝试保持全局空间清晰通常是件好事。 （参见 Douglas Crockfords “Javascript: The Good Parts”，另一本关于 Javascript 的好书，它确实帮助我学习了这门语言。）也许考虑将数据传递给生成表函数，并在解析数据返回的回调中调用该函数？

无论如何，这是我的“简短”两分钱，希望对您有所帮助！

祝你好运。

Answer 2

有几种方法可以做到这一点。但是从你已经拥有的最简单的是使用innerHTML：

queryContact.find({
  success: function(results4) {
    var html = "";
    alert("Successfully retrieved " + results4.length + " entries.");
    // Do something with the returned Parse.Object values
    html += '<table border="1" cellspacing="1" cellpadding="5">';
    for (var i = 0; i < results4.length; i++) {
      var object4 = results4[i];
      contactNameArray[i] = object4.get('ContactName');
      contactNumberArray[i] = object4.get('ContactNumber');
      html += "<tr><td>Number " + i + " is:</td>";
      html += "<td>" + contactNameArray[i] + "</td></tr>";

    }

    html += '</table>';
    document.body.innerHTML += html;
  },
  error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
});

至于在页面上居中表格，最好的方法是使用 CSS。不幸的是，在 CSS 中将任何内容居中是一种 hack。有几种方法可以做到这一点。有关执行此操作的所有方法，请参阅此问题的答案：How to horizontally center a <div> in another <div>?。注意：滚动浏览答案，而不仅仅是阅读最上面的答案。确实有很多方法可以做到这一点，有些可能不适合你。

关于innerHTML的几点说明：

1. 虽然innerHTML 看起来像一个变量，但它实际上更像一个函数。具体来说，它调用浏览器的 HTML 编译器。因此，如果您传递不完整的标签，例如：

   someDiv.innerHTML += '<table>';
   

   它将把它看作一个不完整的'table'标签，并像浏览器看到一个不完整的'table'标签时通常做的那样处理它。对于某些浏览器，这意味着从 DOM 中删除表。对于其他人，这意味着立即插入结束 </table> 标记以使其有效。这意味着当您稍后像这样附加结束标记时：

   someDiv.innerHTML += '</table>';
   

   浏览器会认为你这样做了：

   <table></table></table>
             ^       ^
             |       |_________ what you're trying to insert
             |
      auto inserted by the browser earlier
   

   并以浏览器通常的方式处理它 - 认为该标签无效并丢弃它。

   所以你需要传递 innerHTML 格式良好的 html，这就是为什么我在字符串中创建表结构，然后使用 innerHTML 将其附加到 DOM。

2. 很多人认为innerHTML 在风格上很糟糕，因为您正在使用字符串进行 DOM 操作。还因为innerHTML 最初不是任何标准的一部分，而是 IE 的专有功能。由于它不是任何标准的一部分，因此不同浏览器之间就它应该如何工作没有真正的协议。话虽如此，它可能是最兼容跨浏览器的 DOM 操作方法，因为它是实现最广泛的（即使在非常旧的浏览器上也是如此）。

   阅读 DOM API 的文档以获取有关如何“正确”执行此操作的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

3. 正如其他人在对您的问题的评论中提到的那样，还有一些库可以让您更轻松地进行 DOM 操作。有像 jQuery 这样的程序库，将通常笨重的 DOM API 和跨浏览器问题包装成一个很好用的 API。还有像handlebars这样的模板库，允许您将HTML片段编写为模板，以进行处理并插入到DOM中。

我建议通过阅读 DOM 文档来熟悉 DOM 的工作原理，并遵循一些教程，并查看 jQuery 或 YUI 或下划线等 DOM 操作库，以更好地了解 javascript。

套用 Douglas Crockford 的话说，如果不先学习 C 或 Java，您就不会开始使用 C 或 Java 编程。同样，javascript 是一种功能齐全的语言。花一些时间来学习它，而不是仅仅假设“它就像[插入你知道的语言]”。 javascript 有很多特性，比如闭包和异步函数，它们会让你大吃一惊。同样，DOM 的许多行为可能与您对 HTML 工作方式的假设不同。

但是要吸收的东西很多。所以现在使用innerHTML 时要小心注意它的局限性。另请查看document.getElementById()，它是初学者使用第二多的 DOM API。它允许您使用innerHTML 在文档中插入您的html 任何地方。不仅仅是文档的结尾。