在HTML表格中使用HTML顯示JavaScript關聯數組

-4

我需要在不使用PHP或其他東西的HTML表格中打印JavaScript中關聯數組上排序的結果。排序工作正常，因爲我可以看到在控制檯但它不顯示錶。這是因爲據我現在的源：在HTML表格中使用HTML顯示JavaScript關聯數組

var array = [{ 
 
    name: 'TK345', 
 
    year: 2011, 
 
    custom: 456, 
 
    colour: 'red' 
 
}, { 
 

 
    name: 'ZJ456', 
 
    year: 2001, 
 
    custom: 96, 
 
    colour: 'black' 
 
}, { 
 
    name: 'AW364', 
 
    year: 1985, 
 
    custom: 001, 
 
    colour: 'cyan' 
 
}, { 
 
    name: 'RT112', 
 
    year: 2012, 
 
    custom: 33, 
 
    colour: 'green' 
 
}, { 
 
    name: 'PO445', 
 
    year: 2012, 
 
    custom: 11, 
 
    colour: 'yellow' 
 
}]; 
 

 
function sortarray(sorter) { 
 

 
    if (array.length < 1) { 
 
    return -1; 
 
    } 
 

 
    if (sorter == "name") { 
 

 
    var byName = array.slice(0); 
 
    var tableout = document.createElement('table'); 
 
    var retval = null; 
 
    byName.sort(function(a, b) { 
 

 
     var x = a.name.toLowerCase(); 
 
     var y = b.name.toLowerCase(); 
 
     retval = x < y ? -1 : x > y ? 1 : 0; 
 

 
     tableout.setAttribute('border', '1'); 
 
     tableout.setAttribute('width', '100%') 
 
     var row = tableout.insertRow(0); 
 
     for (j = 1; j <= 5; j++) { 
 
     row = tableout.insertRow(j - 1); 
 
     for (i = 1; i <= 4; i++) 
 
      var text = document.createTextNode(retval); 
 
     var cell = row.insertCell(i - 1); 
 
     cell.setAttribute('align', 'center') 
 
     cell.appendChild(text); 
 
     } 
 
    }) 
 
    document.getElementById("demo").appendChild(tableout); 
 
    console.log(retval); 
 

 
    } else if (sorter == "year") { 
 

 
    var byDate = array.slice(0); 
 
    var tableout = document.createElement('table'); 
 
    var retval = null; 
 
    byDate.sort(function(a, b) { 
 

 
     retval = a.year - b.year; 
 

 
     tableout.setAttribute('border', '1'); 
 
     tableout.setAttribute('width', '100%') 
 
     var row = tableout.insertRow(0); 
 
     for (j = 1; j <= 5; j++) { 
 
     row = tableout.insertRow(j - 1); 
 
     for (i = 1; i <= 4; i++) 
 
      var text = document.createTextNode(retval); 
 
     var cell = row.insertCell(i - 1); 
 
     cell.setAttribute('align', 'center') 
 
     cell.appendChild(text); 
 
     } 
 
    }) 
 
    document.getElementById("demo").appendChild(tableout); 
 
    console.log(retval); 
 

 
    } else {}; 
 

 
};

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <button onclick="sortarray('name')">Sort by Name</button> 
 
    <button onclick="sortarray('year')">Sort by Year</button> 
 
    <p id="demo">test</p> 
 
</body> 
 
</html>

所以也沒有告訴我，表中的任何頁面上或在控制檯中。

任何想法？

來源

2016-08-05 Thevagabond

你有以上這些表格製作的東西return語句。 – instead

想回到那個，現在我有它在一個變量....更新源問題..秒 – Thevagabond

您的代碼在很多方面打破：

你在錯誤的地方
你不需要兩個不同的功能有回報，你只需要有一個不同的排序功能
做一些像for (var i = 1; i <= 4; i++)，然後用i-1是不好的。從0開始
計數，你不能訪問使用整數對象，你需要使用它的鍵（見我的內心）
你不需要else {}
小心縮進，它強調了邏輯錯誤也是如此。
你並不需要打印內表排序功能

我刪除了你的一些錯誤，此功能的工作原理：

<!DOCTYPE html> <html> <body> <button onclick="sortarray('name')">Sort by Name</button> <button onclick="sortarray('year')">Sort by Year</button> <p id="demo">test</p> <script> var array = [ { name: 'TK345', year: 2011, custom: 456, colour: 'red' }, { name: 'ZJ456', year: 2001, custom: 96, colour: 'black' }, { name: 'AW364', year: 1985, custom: 001, colour: 'cyan' }, { name: 'RT112', year: 2012, custom: 33, colour: 'green' }, { name: 'PO445', year: 2012, custom: 11, colour: 'yellow' } ]; function sortarray(sorter) { if (array.length < 1) {return -1;} var elems = array.slice(0); elems.sort(function(a, b) { if (sorter === 'name') { var x = a.name.toLowerCase(); var y = b.name.toLowerCase(); return x < y ? -1 : x > y ? 1 : 0; } return a.year - b.year; }); var tableout = document.createElement('table'); tableout.setAttribute('border','1'); tableout.setAttribute('width','100%'); var row = tableout.insertRow(0); for (var j=0; j<5; j++) { row = tableout.insertRow(j); var keys = Object.keys(elems[j]); for (var i=0; i < keys.length; i++) { var text = document.createTextNode(elems[j][keys[i]]); var cell = row.insertCell(i); cell.setAttribute('align','center'); cell.appendChild(text); } } document.getElementById("demo").appendChild(tableout); console.log(elems); } </script> </body> </html>

來源

2016-08-05 08:28:56 rpadovani

哇謝謝....我會看看這個來源....我覺得我很搞砸了，對不起，只有經驗讓你變得更好。所以感謝您的幫助。 – Thevagabond

@Thevagabond肯定的事情，這是我試圖突出你的錯誤，所以下次會更好:)無論如何，看看'學習Javascript'在這裏：https：//stackoverflow.com/tags/javascript/信息 – rpadovani

感謝您的建議，將這樣做。 – Thevagabond

我們這樣做使用通用tableMaker函數。所以下面的代碼會爲你生成一個表格。泛型tableMaker函數接受第一個參數中提供的對象數組或多個對象數組。所有對象都應具有相同的鍵（屬性），因爲這些鍵用於創建表頭（如果第二個參數設置爲true）並且這些值用於創建每一行。它將返回一個HTML表格文本。

除了我添加了一個非常簡單的排序功能，當您單擊相應的標題時，根據列數據對行進行排序。到現在爲止，它不會按照遞增的降序切換，而是給出如何處理的想法。

function tableMaker(o,h){ 
 
    var keys = Object.keys(o[0]), 
 
    rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>" 
 
                    : "<" + t + ">" + c + "</" + t + ">"),"<tr>"), 
 
     rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); 
 
    return "<table>" + rows + "</table>"; 
 
} 
 

 
function sorter(e){ 
 
    tableData.sort((a,b) => a[e.currentTarget.textContent] < b[e.currentTarget.textContent] ? -1 : 1); 
 
    myTable.innerHTML = tableMaker(tableData,true); 
 
    thList = myTable.querySelectorAll("table tr th"); 
 
    for (var th of thList) { 
 
    th.addEventListener("click", sorter); 
 
    th.textContent === e.currentTarget.textContent ? th.classList = "selected_header" 
 
                : th.classList = "header"; 
 
    } 
 
} 
 

 
var tableData = [{name: 'TK345', year: 2011, custom: 456, colour: 'red'}, 
 
       {name: 'ZJ456', year: 2001, custom: 96, colour: 'black'}, 
 
       {name: 'AW364', year: 1985, custom: 001, colour: 'cyan'}, 
 
       {name: 'RT112', year: 2012, custom: 33, colour: 'green'}, 
 
       {name: 'PO445', year: 2012, custom: 11, colour: 'yellow'}], 
 
     myTable = document.getElementById("myTable"), 
 
     thList; 
 

 
myTable.innerHTML = tableMaker(tableData,true); 
 
thList = myTable.querySelectorAll("table tr th"); 
 
    for (var th of thList) { 
 
    th.addEventListener("click", sorter); 
 
    th.classList = "header"; 
 
    }

.header { 
 
     border: 2px solid tomato; 
 
border-radius: 6px; 
 
    background: pink; 
 
} 
 

 
.selected_header { 
 
     border: 2px solid turquoise; 
 
border-radius: 6px; 
 
    background: paleGreen; 
 
}

<div id="myTable"></div>

來源

2016-08-05 11:35:38 Redu

在HTML表格中使用HTML顯示JavaScript關聯數組

回答

相關問題