for循环创建多个元素？

Question

我在我的网站上显示来自 Google Fusion Table 的数据。到目前为止，我能够将数据显示为 p 标签。

<p>Hotel Name</p>
<p>www.hotelwebsite.com</p>
<p>Hotel description</p>
<p>http://www.hotelwebsite.com/hotelimage.jpg</p>

但我想更改每个项目的元素类型。

<h2>Hotel Name</h2>
<a href="http://www.hotelwebsite.com">www.hotelwebsite.com</a>
<p>Hotel description</p>
<img src="http://www.hotelwebsite.com/hotelimage.jpg"/>

是否可以保留 for 循环，但创建我可以设置不同样式的不同元素？

htmlTable.appendChild(tableRow);
for (var i = 0; i < resp.rows.length; i++) {
  var tableRow = document.createElement('div');

  for (var j = 0; j < resp.rows[i].length; j++) {
    var tableData = document.createElement('p');
    var content = document.createTextNode(resp.rows[i][j]);
    tableData.appendChild(content);
    tableRow.appendChild(tableData);
  }

JSFiddle：http://jsfiddle.net/alsjohnstone/LqmgcLa6/8/

Answer 1

在内部循环中创建一个变量并检查其值并为不同的值创建不同的元素，如果变量达到“3”则创建该元素并将其值设置为“0”

Answer 2

使用三元运算符和取模运算符，您可以使每个其他元素成为 header。

   for (var j = 0; j < resp.rows[i].length; j++) {
        var ele = j % 2 !== 0 ? "p" : "h1";
        var tableData = document.createElement(ele);
        alert(resp.rows[i][j]);

        var content = document.createTextNode(resp.rows[i][j]);
        tableData.appendChild(content);
        tableRow.appendChild(tableData);
    }

http://jsfiddle.net/LqmgcLa6/9/

Answer 3

每行有 4 列（名称、网站 url、描述、图像 url），而不是通过每个单元格递增，而是通过每一行递增，根据需要应用列。

for (var i = 0; i < resp.columns.length; i++) {        
    var tableHeader = document.createElement('p');
    tableRow.appendChild(tableHeader);
    htmlTable.appendChild(tableRow);
    var tableRow = document.createElement('div');

    var tableData = document.createElement('h2');
    var content = document.createTextNode(resp.rows[i][0]); // hotel name
    tableData.appendChild(content);
    tableRow.appendChild(tableData);
    var tableData = document.createElement('a');
    tableData.setAttribute('src',resp.rows[i][1]); // website
    tableRow.appendChild(tableData);
    var tableHeader = document.createElement('p');
    tableRow.appendChild(tableHeader);
    var content = document.createTextNode(resp.rows[i][2]); // hotel description
    tableData.appendChild(content);
    tableRow.appendChild(tableData);
    var tableData = document.createElement('img');
    tableData.setAttribute('src',resp.rows[i][3]); // website
    tableRow.appendChild(tableData);
    htmlTable.appendChild(tableRow);
}
result.appendChild(htmlTable);

proof of concept fiddle

代码片段：

function dataHandler(resp) {
    console.log(resp);
    
    var result = document.getElementById('result');
    var htmlTable = document.createElement('div');
    
    var tableRow = document.createElement('div');
    for (var i = 0; i < resp.columns.length; i++) {        
        var tableHeader = document.createElement('p');
        tableRow.appendChild(tableHeader);
        htmlTable.appendChild(tableRow);
        var tableRow = document.createElement('div');

        var tableData = document.createElement('h2');
        var content = document.createTextNode(resp.rows[i][0]); // hotel name
        tableData.appendChild(content);
        tableRow.appendChild(tableData);
        var tableData = document.createElement('a');
        tableData.setAttribute('src',resp.rows[i][1]); // website
        tableRow.appendChild(tableData);
        var tableHeader = document.createElement('p');
        tableRow.appendChild(tableHeader);
        var content = document.createTextNode(resp.rows[i][2]); // hotel description
        tableData.appendChild(content);
        tableRow.appendChild(tableData);
        var tableData = document.createElement('img');
        tableData.setAttribute('src',resp.rows[i][3]); // website
        tableRow.appendChild(tableData);
        htmlTable.appendChild(tableRow);
    }
    result.appendChild(htmlTable);
}

function getData() {
    
    // Builds a Fusion Tables SQL query and hands the result to  dataHandler
    var queryUrlHead = 'https://www.googleapis.com/fusiontables/v1/query?sql=';
    var queryUrlTail = '&key=AIzaSyCMILeBTrsiwVnO9_SSJ4HYtzZl14dXdRA';
    var tableId = '1_wBUixHJqO_W95zMHk_eP8wQKBuXvHEfvNgfTBSC';

    // write your SQL as normal, then encode it
    var query = "SELECT 'Name', 'URL', 'Description', 'Image' FROM " + tableId + " ORDER BY ST_DISTANCE(Postcode, LATLNG(50.879311, 0.063803)) LIMIT 100; "
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    var jqxhr = $.get(queryurl, dataHandler, "jsonp");
}

getData();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

for循环创建多个元素？

For loop to create multiple elements?

javascript

html

for-loop

google-fusion-tables