顯示器上的表僅某些值從物體

Question

我有一個對象，比方說，

var LocSpecs=[{Address:"xxxxxx",SF:"1,200",YearBuilt:"xxxx"}, 
       {Address:"xxxxxxx",SF:"1,950",YearBuilt:"xxxx"}.......}]; 

在在對象200的鍵/值。

我需要遍歷並獲取滿足值的值並將所述數據顯示在表上。我得到了for()和if()。我只是不完全附加表格來顯示符合標準的記錄。

生成的表將顯示在

document.getElementBy("xxxx").innerHTML=myTable; 

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中再加入純HTML頁面，讓瀏覽器的解析器使用時使用DOMTableElement接口本質上是慢做（這就是瀏覽器的設計畢竟做，解析和顯示HTML）

它使用數組。 filter（）過濾記錄。 它使用箭頭功能來減少代碼量。 它使用模板字符串爲表格創建HTML。

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." 
 
);

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; 
 
}

<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'>