使用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表函數，並在解析數據返回的回調中調用該函數？

無論如何，那是我的“簡短”兩分錢，希望對您有所幫助！

祝好運。