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

每行有4列（名称，网站网址，描述，图片网址），而不是递增每个单元格，在每行中递增，根据需要应用列。

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>

Answer 2

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

Answer 3

使用三元和模数运算符，您可以将每个其他元素设为标题。

   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/

for循环创建多个元素？

3 个答案: