Question

我有一个对象，比方说，

import Foundation
import UIKit
import Social

enum ShareType {
    case FB, Twitter
}

class ShareViewController: SLComposeViewController {

    var shareType: ShareType!

    required init(shareType: ShareType) {
        self.shareType = shareType

        switch shareType {
        case .FB:
            super.init(forServiceType: SLServiceTypeFacebook)
        case .Twitter:
            super.init(forServiceType: SLServiceTypeTwitter)
        }

    }


    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


}

对象中超过200个键/值。

我需要遍历并获取符合值的值并在表格上显示所述数据。

我得到了var LocSpecs=[{Address:"xxxxxx",SF:"1,200",YearBuilt:"xxxx"}, {Address:"xxxxxxx",SF:"1,950",YearBuilt:"xxxx"}.......}];和for()。我只是不完全得到附表，只显示符合标准的记录。

结果表将显示在

上

if()

Answer 1

假设您需要根据对象中的某些值显示行。创建一个在满足条件时构建行的函数。

LocSpecs.forEach(function(elm) {
    if(elm.SF) { // your criteria
       addRow(elm);
    }
});

function addRow(elm) {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = elm.Address;
    cell2.innerHTML = elm.YearBuilt;
}

Answer 2

我给你一个ES6替代方法来制作一张桌子。在JavaScript中使用时，使用DOMTableElement接口本身就会变慢，然后将纯HTML添加到页面并让浏览器的解析器执行此操作（这就是浏览器毕竟设计用来解析和显示HTML）

它使用Array.filter（）来过滤记录。它使用Arrow函数来减少代码量。它使用Template字符串为表创建HTML。

＆＃13;

var locSpecs=[ // some data with random addresses added
    {Address:"691 Union Street Herndon, VA 20170",SF:"1,950",YearBuilt:"1922"},
    {Address:"939 Laurel Drive Pawtucket, RI 02860",SF:"1,950",YearBuilt:"1922"},
    {Address:"176 Redwood Drive Ankeny, IA 50023",SF:"1,850",YearBuilt:"1932"},
    {Address:"621 Sycamore Lane Flint, MI 48504",SF:"1,750",YearBuilt:"1932"},
    {Address:"190 Canterbury Court Bountiful, UT 84010",SF:"1,350",YearBuilt:"1922"},
    {Address:"461 3rd Street West Coram, NY 11727",SF:"1,950",YearBuilt:"1922"}
]




function createTable(data,filter,cellOrder,elementID,title){
    // defined functions needed
    function createRow(record){     // create a row
        var str = "";               // string to hold the row HTML
        cellOrder.forEach(     // for each field in order
            // want it to look good so add the cell class and the field class
            name => str+=`<td class='${fieldClassPrefix+name}' >${record[name]}</td>`
        );
        return `<tr>${str}</tr>`; // wrap a row tab and return the new HTML for row
    }
    function createHeader(){  // created the header
        var str = ""
        cellOrder.forEach(name => str+= `<td class='${fieldClassPrefix+name}' >${name}</td>`);
        return `<thead><tr>${str}</tr></thead>`;
    }
    // define variableds 
    var HTML, tableContainerElement,fieldClassPrefix;  // you should not see any var tokens past this point
    
    HTML = "";  // string to hold the new table HTML
    fieldClassPrefix = "FF_"; // prfix for field class names
    // find the element that will contain the new table
    tableContainerElement = document.getElementById(elementID); 
    
    if(tableContainerElement !== null){                     // make sure we found it
        HTML += `${createHeader()}<tbody>`;   // Add the header and begin the body
        data.filter(record => filter(record))  // filter records
            .forEach(record => HTML+=createRow(record));    // add filteredrecords
            
        // now put it all together and put it on the page
        tableContainerElement.innerHTML = `<div>${title}</div><table>${HTML}</tbody></table>`;
        return true; // incase you need to know it worked
    }
    return false;

}

// create the click events and have them create the tables they need
document.getElementById("But1").addEventListener("click",
       function(){createTable(
           locSpecs,
           function(record){ 
                return Number(record.SF.replace(",","")) < 1800;
           },
           "SF,YearBuilt,Address".split(","),
           "tableContainer",
           "Records with a SF under 1800"
        );}
     );
document.getElementById("But2").addEventListener("click",
       function(){createTable(
           locSpecs,
           function(record){ 
                return Number(record.YearBuilt) > 1922;
           },
           "SF,YearBuilt".split(","),
           "tableContainer",
           "Records built after 1922"
        );}
     );

document.getElementById("But3").addEventListener("click",
       function(){createTable(
           locSpecs,
           function(record){ 
                return record.YearBuilt === "1922";
           },
           "SF,Address".split(","),  // Dont need year 
           "tableContainer",
           "Records built in 1922"
        );}
     );

         
// show the default table 
createTable(  // display all records and fields
      locSpecs,
      function(){return true; }, // filter function true for all
      "Address,SF,YearBuilt".split(","),
      "tableContainer",
      "All records."
);

＆＃13;

input {
    cursor:pointer;
}
but:hover {
    background:#7dF;
}
div {
  width:100%;
}
table {
    border:black 2px solid;
    width:100%;
}
thead {
    font-weight:bold;
    text-align:center;
    border:black 1px solid;
}

thead .FF_SF {
    background:#dfffdf;
    text-align:center;
}
thead .FF_YearBuilt {
    background:#efdfff;
    text-align:center;
}
thead .FF_Address {
    background:#ffefdf;
    text-align:center;
}



.FF_Address {
    background:#ffddcc;
}
.FF_SF {
    background:#ccffdd;
    text-align:center;
}
.FF_YearBuilt {
    background:#ddccff;
    text-align:right;
}

＆＃13;

<div>Select an option "Sorry IE ECMAScript6 browsers only."</div>
<input value="SF less than 1800" id="But1">
<input value="Year Over 1922" id="But2">
<input value="Year 1922" id="But3">
<div id='tableContainer'>

＆＃13;

在表格上仅显示来自对象的特定值

2 个答案: