使用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

有几种方法可以做到这一点。 但是从您已经拥有的最简单的方法是使用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上都有点麻烦。 有几种方法可以做到这一点。 有关所有解决方法，请参见此问题的答案： 如何将<div>在另一个<div>中水平居中？ 。 注意：滚动浏览答案，而不仅仅是阅读排名靠前的答案。 确实有很多方法可以做到这一点，有些可能对您不起作用。

关于innerHTML的一些注意事项：

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

    someDiv.innerHTML += '<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/zh-CN/docs/Web/API/Document_Object_Model

3. 正如其他人在对您的问题的评论中提到的那样，还有一些库可以使您的生活更轻松地进行DOM操作。 有像jQuery这样的程序库，这些库将通常笨拙的DOM API和跨浏览器的问题包装到易于使用的API中。 还有一些模板库，例如把手 ，可让您将HTML片段编写为要处理的模板并插入DOM中。

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

用道格拉斯·克罗克福德（Douglas Crockford）来解释，如果不先学习语言，就不会开始用C或Java编程。 同样，javascript是功能齐全的语言。 花一些时间来学习它，而不仅仅是假设“它的工作方式类似于[插入您知道的语言]” 。 javascript有很多功能，例如闭包和异步函数，它们会绊倒您。 同样，DOM具有许多行为，这些行为可能与您对HTML的工作原理的假设有所不同。

但是要花很多钱。因此，现在使用innerHTML时要注意其局限性。 还要看一下document.getElementById() ，它是初学者第二常用的DOM API。 它允许您使用innerHTML将html插入文档中的任何位置 。 不只是文件的结尾。

Answer 2

通过阅读您的问题，我得出以下结论...

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

2. 将我的信息放入表格时出现问题。

通常，在JavaScript中进行样式并不是一个好主意。 尽管在jscript中方便地处理这些事情看起来不错，但如果不与节制一起使用，最终可能会炸毁您的代码。 最好的选择是编写一些CSS，也许是一个通用类，该通用类可以将元素居中到页面上，然后将该类应用于table元素。 不需要Javascript，它使您的代码更具模块化地启动！

这是一些居中的代码，对我有用，它使注册表格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循环在每次迭代时将名称和编号添加到其自己的单元格中的NEW行中。 这将是您的伪代码...

• 建立表格
• 开始循环浏览每个项目的联系信息...
  • 创建新行
  • 建立新储存格
  • 向各个单元格添加信息
  • 将单元格追加到行
  • 将表格追加到表格
  • 冲洗并重复

根据您所拥有的内容，以下是我所建议内容的未经测试的粗略表述，我是根据您自己的代码构建的，但实际上可以通过多种方式来完成...

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

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

另一件事，我假设可以在全局范围内设置query4变量，该变量将起作用，但是通常最好尝试保持全局空间是否可用以及何时可用。 （请参阅Douglas Crockfords的另一本关于Javascript的好书，《 Javascript：The Good Parts》确实帮助我学习了该语言。）也许考虑将数据传递给generate表函数，并在解析数据返回的回调中调用该函数？

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

祝好运。