For 循环以创建多个元素

For loop to create multiple elements?

本文关键字：元素 创建 循环 For      更新时间：2023-09-26

我正在我的网站上显示来自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/

每行有 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);

概念验证小提琴

代码片段：

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>

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

使用三元和模运算符，您可以将所有其他元素设为标头。

   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/

相关文章：